<template>
  <div @click="showMarketingBuyBtn=false" :class="{'theme-market': showMarketingBar}">
    <template v-if="articleType == 0 || articleType == 1 || !(dataInfo && dataInfo.hasPermission) || showFormText">
      <div id="coverWrap" class="c-w100 c-maxh427 c-text-hidden c-p">
        <img class="c-w100 imgCloseBig" :src="$addXossFilter(dataInfo.courseAvatar)" alt="">
        <div class="c-pa c-p-l24 c-p-t16" v-if="enableBuyedInfoSwiper==1&&dataInfo.payType==2&&swiperList.length>2">
          <buy-inforswiper :swiperList='swiperList'></buy-inforswiper>
        </div>
      </div>
      <!-- 营销活动倒计时 -->
      <flash-sales-time-new
        v-if="showMarketingBar"
        :type="dataInfo.sales? 'isSale':dataInfo.isFriendHelper ? 'isFa' : dataInfo.bargain ? 'isBargain' : 'isCollage'"
        :price="dataInfo.sales ? dataInfo.sales.price : dataInfo.collage ? dataInfo.collage.captainPrice : dataInfo.bargain ? dataInfo.bargain.reservePrice : ''"
        :from="dataInfo.collage && dataInfo.collage.collageGroupType && dataInfo.collage.collageGroupType == 2 ? 'activity' : ''"
        :startTime="dataInfo.sales ? dataInfo.sales.sales.startTime : dataInfo.bargain ? dataInfo.bargain.startTime : dataInfo.collage ? dataInfo.collage.startTime : dataInfo.faStartAt"
        :endTime="dataInfo.sales ? dataInfo.sales.sales.endTime : dataInfo.bargain ? dataInfo.bargain.endTime : dataInfo.collage ? dataInfo.collage.endTime : dataInfo.faEndAt"
        :originalPrice="dataInfo.price" :stock="dataInfo.sales ? dataInfo.sales.balance: ''" :stockBargain="dataInfo.bargain && dataInfo.bargain.stock"
        :isLimit="dataInfo.sales && dataInfo.sales.limit == 0 || (dataInfo.bargain && dataInfo.bargain.isLimitStock == 2) ? false : true" :salesTag="dataInfo.sales && dataInfo.sales.sales.tags"
        :peopleNum="dataInfo.collage && dataInfo.collage.peopleNum" :isPreheat="dataInfo.bargain && dataInfo.bargain.isPreheat" :bargainStatus="dataInfo.bargain && dataInfo.bargain.status"
        :optimal="optimal"
        @showCoupon="showCoupon = true" @falshSalesTime="falshSalesTime" @finishFlashSales="finishFlashSales">
      </flash-sales-time-new>
      <section class="">
        <template v-if="styleType == 1">
          <my-small-tabbar v-if="styleType == 1" class="c-p c-box-shadow10" :class="unenableTopNav ? 'c-wx-top0' : ''" id="tabhBar" :isNew="true" :tabNameClass="'c-fs24'" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>
          <!-- 详情 -->
          <div :class="typeBar == 0 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 0">
            <div class="c-bd-b12-f5 c-p">
              <div class="c-flex-row c-aligni-center c-pr24">
                <div class="c-w0 c-flex-grow1">
                  <price-bar class="c-pt28 c-pl24" v-if="isShowPriceBar"
                    :recType="recType"
                    :dataInfo="dataInfo"
                    :chainInfo="chainInfo"
                  >
                  </price-bar>
                  <div :class="!isOffSale && !isMarketing && !dataInfo.hasPermission && dataInfo.isSaleOnly != 0 ? 'c-pt12' : 'c-pt28'" class="c-ph24">
                    <span class="c-fs30 c-fc-xblack c-fw-b">{{dataInfo.name}}</span>
                  </div>
                  <div class="c-ph24 c-p">
                    <!-- 需要展示价格和会员折扣模块的时候才有c-bd-b1 -->
                    <div class="c-pt16 c-pb28 c-fs20 c-fc-gray c-flex-row">
                      <span class="c-mr20" v-if="!distributionId && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))">{{dataInfo.plays | formatNumber}}人观看</span>
                      <valid-time-com v-if="dataInfo.isSaleOnly == 1" :dataInfo="dataInfo" :prodId="courseId" :prodType="cfrom.course"></valid-time-com>
                    </div>
                  </div>
                </div>
                <collect-btn-com v-if="!distributionId" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.course" :prodId="courseId" :subProdType="2" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
              </div>
              <!-- 引导入群 -->
              <section
                v-if="showInviteGroup"
                @click="handleShowGuidePop()"
                class="c-mh24 c-mb30 c-pl16 c-pr20 c-hh64 c-fs24 camp-guide c-flex-row c-aligni-center"
              >
                <img class="c-ww52 c-hh32" src="../../../assets/i/wap/course/group_guide.png" alt="">
                <div class="c-w0 c-flex-grow1 c-fc-xblack c-fw600 c-pl16">{{dataInfo.guideData.guideDesc}}</div>
                <div class="iconfont c-fs40 fc-3F73F8">&#xe986;</div>
              </section>
              <!-- 非强制表单入口 -->
              <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3&& dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
                relType="1"  :relId="courseId"  :dataInfo="dataInfo"
                classObject="c-fs22" fontSizeClass="c-fs20" iconSizeClass="c-fs14" topClass="c-bd-t12-f5"
                @goForm="goForm" ></formEntry>
              <!-- 领取证书 -->
              <div v-if="showStudyCard" class="c-ph24 c-pv20" @click="handleClickCertificate()">
                <div class="badge-bg c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv20">
                  <div class="c-ww36 c-hh40">
                    <img :src="require('@/assets/i/wap/camp/medal.png')" class="c-w100 c-h c-object-fit-c" alt="">
                  </div>
                  <div class="c-w0 c-flex-column c-flex-grow1 c-justify-sb c-ph10">
                    <div class="c-fc-A2743D c-fs28 c-fw600 c-text-ellipsis1">恭喜您获得学习证书</div>
                  </div>
                  <div class="c-fs22 c-fc-A2743D c-flex-row c-flex-center">
                    查看
                    <i class="iconfont c-pl10">&#xe635;</i>
                  </div>
                </div>
              </div>
              <!-- 积分及会员，大转盘，vip入口优惠提示 -->
              <discount-tip
                :hasCircle="dataInfo && dataInfo.circleList && dataInfo.circleList.length > 0"
                :hasGiftRelates="dataInfo.giftRelates && dataInfo.giftRelates.length > 0 ? true : false"
                :giftRelatesCount="dataInfo.giftRelates ? dataInfo.giftRelates.length : 0"
                :hasCollocation="!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0 ? true : false"
                :isNew="true"
                :sales="dataInfo.sales" :collage="dataInfo.collage"
                :isFriendHelper="dataInfo.isFriendHelper"
                :distributionId="distribution"
                :couponList="couponList"
                :hasPermission='dataInfo.hasPermission'
                :turnName="dataInfo.joinActivityInfo && dataInfo.joinActivityInfo.activityData?dataInfo.joinActivityInfo.activityData.name:''"
                :isiOS='isiOS'
                :hasRelatesDatum="dataInfo && dataInfo.relateDatumArr && dataInfo.relateDatumArr.length > 0"
                :isMarketing='dataInfo.sales'
                :showTurn="showTurn"
                :isRecommend="isRecommend"
                :showDiscount="showDiscount"
                :dataInfo="dataInfo"
                :chainInfo="chainInfo"
                @joinCircle="joinCircle"
                @clickShowCoupon="showCoupon = true"
                @goTOturn="goTOturn"
                @popRelate="popRelate"
                @popGiftModal="popGiftModal"
                @popRelatesDatum="popRelatesDatumModal"
                v-if="(dataInfo.payType == 2 || (dataInfo.relateDatumArr && dataInfo.relateDatumArr.length) || (dataInfo.circleList && dataInfo.circleList.length)) && !isOffSale && !isUserGroup && !isStoreUserGroup"></discount-tip>
              <bargain-rules v-if="dataInfo.bargain != null && !dataInfo.hasPermission" :isPreheat="dataInfo.bargain.isPreheat" :status="dataInfo.bargain.status" class="c-bd-b12-f5"></bargain-rules>
            </div>
            <collage-persons-list v-if="dataInfo && !dataInfo.hasPermission && (ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)" class="c-bd-b12-f5" :isCourse="true" :hasExpired="hasExpired" :collage="dataInfo.collage" @startCollage="goCollageDetail(-1,dataInfo.collage.collageId)" @goCollageDetail="gcd"></collage-persons-list>
            <collocation-buy-com :prodInfo="{prodType: 5, prodId: courseId}" :relateCollocationArr="relateCollocation"></collocation-buy-com>
            <lecturer-com class="c-pt24 c-pb40 c-bd-b12-f5" v-if="dataInfo.lecturers && dataInfo.lecturers.length > 0" :lecturersArr="dataInfo.lecturers" :courseId="courseId" :showLecturerModal="showLecturerModal" @closeDetailModal="showLecturerModal=false" @clickLecturer="clickLecturer"></lecturer-com>
            <more-device class="c-bd-b12-f5" v-if="dataInfo.hasPermission" :positionType="moreDeviceType" :hasBottomBar="hasBottomBar" :prodInfo="{prodType: cfrom.course, prodId: courseId, courseType: 2, name: dataInfo.name}"></more-device>
            <div :class="dataInfo && dataInfo.centerProducts && dataInfo.centerProducts.length > 0 && dataInfo.centerProducts[0] ? 'c-bd-b12-f5' : ''">
              <div class="c-p c-pb20 c-pt10">
                <div class="c-p c-ph24">
                  <div v-if="isOffSale || timingPutOn" class="c-w100 c-h c-pa c-p-t0 c-p-l0 glass c-translucent-white50 c-pz2">
                    <div class="c-w100 c-h backdropFilter"></div>
                    <div class="theme-fc c-pa c-w100 c-h c-flex-column c-flex-center c-p-t0 c-p-l0">
                      <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
                      <div class="c-fs24 c-pt12 c-textAlign-c">课程{{timingPutOn ? '暂未上架' : '已下架'}}</div>
                    </div>
                  </div>
                  <div id="descParent1" @click="clickDesc" v-if="!dataInfo.hasPermission || isUserGroup || isStoreUserGroup">
                    <course-description :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" v-if="!distributionId" ref="previewDescriptions" :imgTextPreviewArr="dataInfo && dataInfo.previewPath ? dataInfo.previewPath : []" :isImgTextPreview="true" :prodType="cfrom.course" :prodId="courseId"></course-description>
                    <div v-else-if="dataInfo.preview" class="c-pb60 tinymce-text c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll c-pt20" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="dataInfo.preview"></div>
                    <div class="c-flex-column c-textAlign-c c-pv20">
                      <span class="theme-fc icon iconfont c-fs40">&#xe849;</span>
                      <span class="c-fc-xblack c-fs22 c-mt20">以上是试看内容，精彩内容领取课程后继续哦</span>
                    </div>
                  </div>
                  <div v-if="dataInfo.hasPermission && !isUserGroup && !isStoreUserGroup">
                    <template v-if="!distributionId">
                      <div v-if="dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone" class="c-flex-column c-textAlign-c c-pv20">
                        <span class="theme-fc icon iconfont c-fs46">&#xe8bc;</span>
                        <span class="c-fc-xblack c-fs22 c-mt20">精彩内容，绑定手机号后可{{dataInfo.payType == 1 && dataInfo.isSaleOnly == 1 ? '免费' : ''}}观看</span>
                      </div>
                      <course-description v-show="!(dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone)" :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" ref="descriptions" :prodType="cfrom.course" :prodId="courseId"></course-description>
                    </template>
                    <div v-else class="tinymce-text c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll c-pt20" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
                      v-html="dataInfo.detail"></div>
                  </div>
                </div>
                <package-index-com class="c-bd-b12-f5" id="seriesPart"
                  :showPackageModal="true" :articleType="2" @clickGoAllPackage="clickGoAllPackage"
                  :styleType="2" :relevantTitles="'包含该课程的系列课'" :showAll="true" :proType="1" :proId="courseId" :isHomePage="false"
                  :packageList="dataInfo.combos.filter((item,index) => {return index == 0 || index == 1 || index == 2})"
                  v-if="dataInfo && dataInfo.combos.length > 0">
                </package-index-com>
                <!-- 下划线需判断底部是否有内容 -->
                <div class="c-flex-row c-flex-center c-pt30 c-pb40" :class="(dataInfo.backgroundImgType != 3 && companyAuth && companyAuth.version == 1) || fromColumnId != -1 || (isiOS && companyId == 'ldwk') || (dataInfo.centerProducts && dataInfo.centerProducts.length > 0 && dataInfo.centerProducts[0]) ? 'c-bd-b1' : ''" v-if="cfg ? (cfg.enableLikes == 1 ? true : false) : false">
                  <div class="c-fs28 c-ph24 c-textAlign-c c-pv12 c-br36 c-inline-center" :class="!dataInfo.isLike ? 'theme-bg theme-box-shadow' : 'c-bg-f2'" @click="clickLikes">
                    <span class="c-fs28 c-fc-white c-mr10 iconfont" :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">&#xe684;</span>
                    <span :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">{{dataInfo.likes | formatNumber}}</span>
                  </div>
                </div>
              </div>
              <!-- 所属专栏 -->
              <div class="c-ph24" v-if="fromColumnId != -1">
                <related-combo :showType="1" :distributionId="distributionId" :isShowModal="false" :columnList="belongColumnList" :showCombo="true" :columnMore="is_page_column"
                  @backPackage="backPackage" @closeCombo="closeCombo" @getMore="getMore"></related-combo>
              </div>
              <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
                <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
              </div>
            </div>
            <!-- 主推商品 -->
            <course-advocate :dataInfo="dataInfo" @goCenterProduct="goCenterProduct"></course-advocate>
            <div class="c-pt30 c-ph24" v-if="dataInfo.backgroundImgType != 3">
              <h2 class="c-fs22 c-fc-sblack c-textAlign-c">长按识别二维码关注微信公众号</h2>
              <span class="c-block iconfont c-textAlign-c c-fc-sgray c-fs18">&#xe70b;</span>
              <div class="qrbg c-textAlign-r c-pt24 c-pr20"
                :style="dataInfo.backgroundImgType == 2 ? 'backgroundImage:url(&quot;' + dataInfo.backgroundImgUrl + '&quot;)' : 'backgroundImage:url(' + require('@/assets/i/wap/course/ad.jpg') +')'">
                <img v-if="(dataInfo.backgroundImgType == 2 && dataInfo.isShowCode == 1 && dataInfo.mpQrcode) || (dataInfo.backgroundImgType == 1 && dataInfo.mpQrcode)" :src="$addXossFilter(dataInfo.mpQrcode)" :key="dataInfo.mpQrcode" class="c-ww180 c-hh180" />
              </div>
            </div>
          </div>
          <!-- 评论 -->
          <div :class="typeBar == 2 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 2">
            <commentCom ref="commentCom" v-show="commentStatus == 1" :moduleType="distributionId ? 2 : 1" :prodType="cfrom.course" :prodId="courseId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount" @handleClickPlaint="handleClickPlaint"></commentCom>
            <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
              <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
            </div>
          </div>
          <!-- 搭配学习 -->
          <div class="c-pv30 c-ph24" :class="typeBar == 3 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 3">
            <div class="c-flex-row c-hh100 c-aligni-center" :class="index+1 == relatedList.length ? '' : 'c-mb20'" v-for="(item, index) in relatedList" :key="index"
              @click="goRevlantDetail(item.mainProdType, item.id,item)">
              <div class="c-ww150 c-hh100 c-text-hidden c-br8 c-p">
                <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{item.mainProdType == 112 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</div>
                <img :src="$addXossFilter(item.cover)" alt="">
              </div>
              <div class="c-flex-grow1 c-w0 c-hh100 c-ph20 c-fs24 c-fw400 c-flex-column c-justify-sb">
                <p class="c-text-ellipsis2">{{item.name}}</p>
                <p v-if="item.mainProdType != 112 || (item.mainProdType == 112 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs18 c-fc-gray">{{item.number}}人参与</p>
              </div>
              <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
            </div>
          </div>
          <!-- 相关推荐 -->
          <div class="c-pb20" :class="typeBar == 4 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 4">
            <!-- 分销商城没有知识套餐和关联 -->
            <template v-if="!distributionId">
              <!-- <package-index-com :showAll="true" :isNewRelatedStyle="true" :proType="1" :proId="courseId" :isHomePage="false" :packageList="dataInfo.combos" v-if="dataInfo && dataInfo.combos.length > 0"></package-index-com> -->
              <loading-status-tem v-if="relationData==''" :showLoading="true"></loading-status-tem>
              <div class="">
                <active-and-column v-if="relationData != ''" :courseList="relationData.courses" :goodsList="relationData.goods" :soicalList="relationData.socials" :examList="relationData.exams"
                  :speechList="relationData.speechs" :mutualList="relationData.mutuals" :datumList="relationData.datums" :eBookList="relationData.ebooks" :circleList="relationData.circle"></active-and-column>
              </div>
              <loading-status-tem
                :pt20="true" :class="dataInfo.combos == '' && relationData.courses == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.ebooks == '' && relationData.circle == '' ? 'c-pv160' : ''"
                :noData="dataInfo.combos == '' && relationData.courses == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.ebooks == '' && relationData.circle == ''"
                :noDataText="'暂无推荐'"></loading-status-tem>
            </template>
          </div>
        </template>
        <template v-else>
          <section class="c-p" id="courseInfo" v-if="dataInfo != ''">
            <div class="c-bd-b12-f5 c-mt24">
              <price-bar v-if="isShowPriceBar"
                :recType="recType"
                :dataInfo="dataInfo"
                :styleType="2"
                :chainInfo="chainInfo"
              >
              </price-bar>
              <discount-info class="c-mt8" v-if="!$isWxAppIos() && !distributionId && !isiOS && !dataInfo.hasPermission && dataInfo.isSaleOnly != 0 && dataInfo.payType == 2 && !isRecommend"
                :couponList="couponList"
                :isMarketing="isMarketing"
                :dataInfo="dataInfo"
                :chainInfo="chainInfo"
                @clickShowCoupon="showCoupon = true"
              >
              </discount-info>
              <div v-if="!dataInfo.hasPermission && !$isWxAppIos() && !isiOS && !isRecommend" class="c-mt20 c-ph24">
                <vip-entry
                  :styleType="2"
                  :dataInfo="dataInfo"
                ></vip-entry>
              </div>
              <div v-if="!isRecommend || (isRecommend && dataInfo.hasPermission)" class="c-ph24 c-mt24">
                <div class="c-fs30 c-fc-xblack c-fw600">{{dataInfo.name}}</div>
              </div>
              <div class="c-flex-row c-aligni-center c-ph24 c-pb30">
                <div class="c-fs20 c-fc-gray c-flex-row c-aligni-center c-w0 c-flex-grow1 c-flexw-wrap">
                  <!-- <div class="c-mr20 c-pv4"><span class="c-fs20 iconfont c-mr4">&#xe624;</span>共{{dataInfo != "" && dataInfo.items != null ? dataInfo.dirCount : 0}}节</div> -->
                  <div class="c-mr20" v-if="!distributionId && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))"><span class="c-fs20 iconfont c-mr4 c-pv4">&#xe6bb;</span>{{dataInfo.plays | formatNumber}}人观看</div>
                  <div class="c-flex-row c-aligni-center c-pv4" v-if="dataInfo.isSaleOnly == 1">
                    <span class="c-fs20 iconfont c-mr4">&#xe7a6;</span>
                    <valid-time-com :dataInfo="dataInfo" :prodId="courseId" :prodType="cfrom.course"></valid-time-com>
                  </div>
                </div>
                <div class="c-flex-row c-aligni-center">
                  <div v-if="dataInfo.showPresentFriend && !isiOS && !$isWxApp()" class="c-flex-column c-aligni-center c-ww52 c-mr8 coms-live-iframe-none" @click="popPresentCourse">
                    <div class="iconfont c-fs36 c-fc-xblack">&#xe7b9;</div>
                    <div class="c-fs16 c-fc-xblack c-mt4">赠送</div>
                  </div>
                  <collect-btn-com v-if="!distributionId" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.course" :prodId="courseId" :subProdType="2" class="" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
                </div>
              </div>
              <!-- 引导入群 -->
              <invite-group class="c-pr24 c-pb24"
                v-if="showInviteGroup"
                :guideText="dataInfo.guideData.guideDesc"
                @handleShowGuidePop="handleShowGuidePop"
              >
              </invite-group>
            </div>
            <div v-if="(showTurn || hasGiftRelates || (dataInfo && dataInfo.relateDatumArr && dataInfo.relateDatumArr.length > 0) || (!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0) || (dataInfo && !dataInfo.hasPermission && dataInfo.circleList && dataInfo.circleList.length > 0) || (dataInfo.centerProducts && dataInfo.centerProducts.length > 0 && dataInfo.centerProducts[0]) || (relateCollocation && relateCollocation.length > 0)) && !isOffSale && !isUserGroup && !isStoreUserGroup" class="c-ph24 c-bd-b12-f5">
              <discount-tip :styleType="2" :prodInfo="{prodType: 5, prodId: courseId}" :relateCollocationArr="relateCollocation" :recommendProdInfo="!dataInfo.hasPermission && dataInfo.centerProducts && dataInfo.centerProducts.length > 0 && dataInfo.centerProducts[0] ? dataInfo.centerProducts[0] : null" @joinCircle="joinCircle" :hasCircle="dataInfo && !dataInfo.hasPermission && dataInfo.circleList && dataInfo.circleList.length > 0" :hasGiftRelates="hasGiftRelates" :giftRelatesCount="dataInfo.giftRelates ? dataInfo.giftRelates.length : 0" :hasCollocation="!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0 ? true : false"
                @goTOturn="goTOturn" @popRelate="popRelate" @popGiftModal="popGiftModal"
                :turnName="dataInfo.joinActivityInfo && dataInfo.joinActivityInfo.activityData?dataInfo.joinActivityInfo.activityData.name:''" :hasRelatesDatum="dataInfo && dataInfo.relateDatumArr && dataInfo.relateDatumArr.length > 0" @popRelatesDatum="popRelatesDatumModal"
                :showTurn="showTurn" @goCenterProduct="goCenterProduct"></discount-tip>
            </div>
            <!-- 非强制表单 -->
            <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3&& dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
              relType="1"  :relId="courseId"  :dataInfo="dataInfo"
              classObject="c-fs24 c-fw600" fontSizeClass="c-fs22" iconSizeClass="c-fs18" topClass="c-bd-b12-f5"
              @goForm="goForm" ></formEntry>
            <!-- 领取证书 -->
            <div v-if="showStudyCard" class="c-ph24 c-pv20 c-bd-b12-f5" @click="handleClickCertificate()">
              <div class="badge-bg c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv20">
                <div class="c-ww36 c-hh40">
                  <img :src="require('@/assets/i/wap/camp/medal.png')" class="c-w100 c-h c-object-fit-c" alt="">
                </div>
                <div class="c-w0 c-flex-column c-flex-grow1 c-justify-sb c-ph10">
                  <div class="c-fc-A2743D c-fs28 c-fw600 c-text-ellipsis1">恭喜您获得学习证书</div>
                </div>
                <div class="c-fs22 c-fc-A2743D c-flex-row c-flex-center">
                  查看
                  <i class="iconfont c-pl10">&#xe635;</i>
                </div>
              </div>
            </div>
            <bargain-rules v-if="dataInfo.bargain != null && !dataInfo.hasPermission" :defaultStyle="c-bd-b12-f5" :isPreheat="dataInfo.bargain.isPreheat" :status="dataInfo.bargain.status" class="c-bd-t12-f5"></bargain-rules>
            <collage-persons-list v-if="dataInfo && !dataInfo.hasPermission && (ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)" class="c-bd-b12-f5" :isCourse="true" :hasExpired="hasExpired" :collage="dataInfo.collage" @startCollage="goCollageDetail(-1,dataInfo.collage.collageId)" @goCollageDetail="gcd"></collage-persons-list>
            <more-device class="c-bd-b12-f5" v-if="dataInfo.hasPermission && typeBar == 0" :positionType="moreDeviceType" :hasBottomBar="hasBottomBar" :prodInfo="{prodType: cfrom.course, prodId: courseId, courseType: 2, name: dataInfo.name}"></more-device>
            <!-- <collocation-buy-com :relateCollocationArr="relateCollocation"></collocation-buy-com> -->
          </section>
          <div class="c-hh76" id="tabhBar">
            <my-small-tabbar class="c-bg-white c-hh76 c-bd-b1-f6 c-ph24" :styleType="2" :class="[tabhBarFixed == true ? isiOS ? 'tab-bar-ios' : ($isWxApp() ? 'tabhBar c-wx-top0' : 'tabhBar')  : '', unenableTopNav ? 'c-wx-top0' : '']" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>
          </div>
          <div class="c-pb40" :class="typeBar == 0 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 0">
            <lecturer-com class="c-pt24 c-pb10" v-if="dataInfo.lecturers && dataInfo.lecturers.length > 0" :lecturersArr="dataInfo.lecturers" :courseId="courseId" :showLecturerModal="showLecturerModal" @closeDetailModal="showLecturerModal=false" @clickLecturer="clickLecturer"></lecturer-com>
            <div class="c-pb20 c-pt10">
              <div class="c-p c-ph24">
                <div v-if="isOffSale || timingPutOn" class="c-w100 c-h c-pa c-p-t0 c-p-l0 glass c-translucent-white50 c-pz2">
                  <div class="c-w100 c-h backdropFilter"></div>
                  <div class="theme-fc c-pa c-w100 c-h c-flex-column c-flex-center c-p-t0 c-p-l0">
                    <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
                    <div class="c-fs24 c-pt12 c-textAlign-c">课程{{timingPutOn ? '暂未上架' : '已下架'}}</div>
                  </div>
                </div>
                <div id="descParent1" @click="clickDesc" v-if="!dataInfo.hasPermission || isUserGroup || isStoreUserGroup">
                  <course-description :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" v-if="!distributionId" ref="previewDescriptions" :imgTextPreviewArr="dataInfo && dataInfo.previewPath ? dataInfo.previewPath : []" :isImgTextPreview="true" :prodType="cfrom.course" :prodId="courseId"></course-description>
                  <div v-else-if="dataInfo.preview" class="c-pb60 tinymce-text c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll c-pt20" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="dataInfo.preview"></div>
                  <div class="c-flex-column c-textAlign-c c-pv20">
                    <span class="theme-fc icon iconfont c-fs40">&#xe849;</span>
                    <span class="c-fc-xblack c-fs22 c-mt20">以上是试看内容，精彩内容领取课程后继续哦</span>
                  </div>
                </div>
                <div v-if="dataInfo.hasPermission && !isUserGroup && !isStoreUserGroup">
                  <template v-if="!distributionId">
                    <div v-if="dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone" class="c-flex-column c-textAlign-c c-pv20">
                      <span class="theme-fc icon iconfont c-fs46">&#xe8bc;</span>
                      <span class="c-fc-xblack c-fs22 c-mt20">精彩内容，<span class="c-fc-smblue" @click="goBindMobile()">绑定手机号</span>后可{{dataInfo.payType == 1 && dataInfo.isSaleOnly == 1 ? '免费' : ''}}观看</span>
                    </div>
                    <course-description v-show="!(dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone)" :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" ref="descriptions" :prodType="cfrom.course" :prodId="courseId"></course-description>
                  </template>
                  <div v-else class="tinymce-text c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll c-pt20" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
                    v-html="dataInfo.detail"></div>
                </div>
              </div>
              <!-- 下划线需判断底部是否有内容 -->
              <div class="c-flex-row c-flex-center c-pt30 c-pb40" :class="(dataInfo.backgroundImgType != 3 && companyAuth && companyAuth.version == 1) || (isiOS && companyId == 'ldwk') || (dataInfo.combos && dataInfo.combos.length > 0) ? 'c-bd-b1' : ''" v-if="cfg ? (cfg.enableLikes == 1 ? true : false) : false">
                <div class="c-fs28 c-ph24 c-textAlign-c c-pv12 c-br36 c-inline-center" :class="!dataInfo.isLike ? 'theme-bg theme-box-shadow' : 'c-bg-f2'" @click="clickLikes">
                  <span class="c-fs28 c-fc-white c-mr10 iconfont" :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">&#xe684;</span>
                  <span :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">{{dataInfo.likes | formatNumber}}</span>
                </div>
              </div>
            </div>
            <package-index-com
              :showPackageModal="true" @clickGoAllPackage="clickGoAllPackage"
              :styleType="2" :relevantTitles="'包含该课程的系列课'" :showAll="true" :proType="1" :proId="courseId" :isHomePage="false"
              :packageList="dataInfo.combos.filter((item,index) => {return index == 0})"
              v-if="dataInfo && dataInfo.combos.length > 0">
            </package-index-com>
            <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
              <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
            </div>
            <div class="c-pt30 c-ph24" v-if="dataInfo.backgroundImgType != 3">
              <h2 class="c-fs22 c-fc-sblack c-textAlign-c">长按识别二维码关注微信公众号</h2>
              <span class="c-block iconfont c-textAlign-c c-fc-sgray c-fs18">&#xe70b;</span>
              <div class="qrbg c-textAlign-r c-pt24 c-pr20"
                :style="dataInfo.backgroundImgType == 2 ? 'backgroundImage:url(&quot;' + dataInfo.backgroundImgUrl + '&quot;)' : 'backgroundImage:url(' + require('@/assets/i/wap/course/ad.jpg') +')'">
                <img v-if="(dataInfo.backgroundImgType == 2 && dataInfo.isShowCode == 1 && dataInfo.mpQrcode) || (dataInfo.backgroundImgType == 1 && dataInfo.mpQrcode)" :src="$addXossFilter(dataInfo.mpQrcode)" :key="dataInfo.mpQrcode" class="c-ww180 c-hh180" />
              </div>
            </div>
            <!-- <div class="c-bg-sgray c-hh70"></div> -->
          </div>
          <!-- 评论 -->
          <div id="commentWrap" :class="typeBar == 2 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 2">
            <commentCom ref="commentCom" v-show="commentStatus == 1" :moduleType="distributionId ? 2 : 1" :prodType="cfrom.course" :prodId="courseId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount" @handleClickPlaint="handleClickPlaint"></commentCom>
            <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
              <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
            </div>
          </div>
          <!-- 搭配学习 -->
          <div class="c-pv30 c-ph24" :class="typeBar == 3 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 3">
            <div v-if="dataInfo && dataInfo.circleList && dataInfo.circleList.length > 0"
              class="c-flex-row c-aligni-start c-pt20 c-pb20 c-bd-b1-f5"
              @click="joinCircle"
            >
              <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br10 c-flex-shrink0 c-p">
                <img
                  :src="$addXossFilter(dataInfo.circleList[0].avatar, require('../../../assets/defult270.png'))"
                  class="c-maxh c-maxw imgCloseBig c-br10"
                />
                <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">圈子</div>
              </div>
              <div class="c-pl20 c-flex-grow1">
                <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
                  <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{dataInfo.circleList[0].name}}</div>
                  <div class="c-fs26 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
                    <div>{{dataInfo.circleList[0].memberCount}}人参与</div>
                    <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c-flex-row c-aligni-start c-pt20 c-pb20"
              v-for="(item, index) in relatedList" :key="index" :class="index == relatedList.length - 1 ? '' : 'c-bd-b1-f5'"
              @click="goRevlantDetail(item.mainProdType, item.id,item)"
            >
              <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br10 c-flex-shrink0 c-p">
                <img
                  :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))"
                  class="c-maxh c-maxw imgCloseBig c-br10"
                />
                <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">{{item.mainProdType == 112 ? '打卡' : prodTypes[item.mainProdType]}}</div>
              </div>
              <div class="c-pl20 c-flex-grow1">
                <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
                  <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
                  <div class="c-fs26 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
                    <div class="c-fs22">{{item.mainProdType != 112 || (item.mainProdType == 112 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41)))) ? (item.number + '人参与') : ''}}</div>
                    <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 相关推荐 -->
          <div :class="typeBar == 4 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 4">
            <!-- 主推商品 -->
            <course-advocate v-if="dataInfo.hasPermission" :dataInfo="dataInfo" @goCenterProduct="goCenterProduct"></course-advocate>
            <!-- 分销商城没有知识套餐和关联 -->
            <template v-if="!distributionId">
              <!-- <package-index-com :showAll="true" :isNewRelatedStyle="true" :proType="1" :proId="courseId" :isHomePage="false" :packageList="dataInfo.combos" v-if="dataInfo && dataInfo.combos.length > 0"></package-index-com> -->
              <!-- <loading-status-tem v-if="relationData==''" :showLoading="true"></loading-status-tem> -->
              <active-and-column v-if="relationData != ''" :styleType="2" :courseList="relationData.courses" :goodsList="relationData.goods" :soicalList="relationData.socials" :examList="relationData.exams"
                :speechList="relationData.speechs" :mutualList="relationData.mutuals" :datumList="relationData.datums" :eBookList="relationData.ebooks" :circleList="relationData.circle"></active-and-column>
              <loading-status-tem
                :pt20="true" :class="!relationData || (relationData.courses == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.ebooks == '' && relationData.circle == '') ? 'c-pv160' : ''"
                :noData="!relationData || (relationData.courses == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.ebooks == '' && relationData.circle == '')"
                :noDataText="'暂无推荐'"></loading-status-tem>
            </template>
          </div>
        </template>
      </section>
    </template>
    <template v-else-if="articleType == 2">
      <my-small-tabbar class="c-bg-white c-hh76 c-bd-b1-f6 c-ph24 tabhBar" v-if="showSmallTabbar" :styleType="2" :tabList="typeTabList" :tabIndex="articleTypeBar" @changeTab="articleChangeType"></my-small-tabbar>
      <div id="topDetail">
        <div class="c-ph24 c-pt30">
          <span class="c-fs30 c-fc-xblack c-fw600">{{dataInfo.name}}</span>
        </div>
        <div :class="(dataInfo.lecturers && dataInfo.lecturers.length > 0) || dataInfo.articleFrom ? 'c-mt24' : 'c-mt12'" class="c-flex-row c-aligni-center c-ph24 c-pb16  c-w100">
          <div class="c-w0 c-flex-grow1">
            <div class="c-flex-row c-flexw-wrap c-pr30 c-fs20 c-fc-gray c-mb16">
              <span class="c-maxw c-text-ellipsis1 c-ws-n c-fc-blue c-mr24 c-mb10" @click="showLecturersDetail" v-if="dataInfo.lecturers && dataInfo.lecturers.length > 0">{{dataInfo.lecturers[0].lecturerName}}</span>
              <span class="c-maxw c-text-ellipsis1 c-ws-n" v-if="dataInfo.articleFrom">{{dataInfo.articleFrom}}</span>
            </div>
            <div class="c-fs20 c-fc-gray c-flex-row c-aligni-center c-flexw-wrap">
              <!-- <div class="c-mr20 c-pv4"><span class="c-fs20 iconfont c-mr4">&#xe624;</span>共{{dataInfo != "" && dataInfo.items != null ? dataInfo.dirCount : 0}}节</div> -->
              <div class="c-flex-row c-aligni-center c-pv4 c-mr20" v-if="dataInfo.isSaleOnly == 1">
                <span class="c-fs20 iconfont c-mr4">&#xe7a6;</span>
                <valid-time-com :dataInfo="dataInfo" :prodId="courseId" :prodType="cfrom.course"></valid-time-com>
              </div>
              <div v-if="!distributionId && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))"><span class="c-fs20 iconfont c-mr4 c-pv4">&#xe6bb;</span>{{dataInfo.plays | formatNumber}}人观看</div>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center">
            <div v-if="dataInfo.showPresentFriend && !isiOS && !$isWxApp()" class="c-flex-column c-aligni-center c-ww52 c-mr8 coms-live-iframe-none" @click="popPresentCourse">
              <div class="iconfont c-fs36 c-fc-xblack">&#xe7b9;</div>
              <div class="c-fs16 c-fc-xblack c-mt4">赠送</div>
            </div>
            <collect-btn-com v-if="!distributionId" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.course" :prodId="courseId" :subProdType="2" class="" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
          </div>
        </div>
        <!-- 引导入群 -->
        <invite-group class="c-pr24 c-pb24"
          v-if="showInviteGroup"
          :guideText="dataInfo.guideData.guideDesc"
          @handleShowGuidePop="handleShowGuidePop"
        >
        </invite-group>
      </div>
      <!-- 非强制表单 -->
      <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3&& dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
        relType="1"  :relId="courseId"  :dataInfo="dataInfo"
        classObject="c-fs24 c-fw600" fontSizeClass="c-fs22" iconSizeClass="c-fs18" topClass="c-bd-b12-f5 c-bd-t12-f5"
        @goForm="goForm" ></formEntry>
      <!-- 领取证书 -->
      <div v-if="showStudyCard" class="c-ph24 c-pv20 c-bd-b12-f5" @click="handleClickCertificate()">
        <div class="badge-bg c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv20">
          <div class="c-ww36 c-hh40">
            <img :src="require('@/assets/i/wap/camp/medal.png')" class="c-w100 c-h c-object-fit-c" alt="">
          </div>
          <div class="c-w0 c-flex-column c-flex-grow1 c-justify-sb c-ph10">
            <div class="c-fc-A2743D c-fs28 c-fw600 c-text-ellipsis1">恭喜您获得学习证书</div>
          </div>
          <div class="c-fs22 c-fc-A2743D c-flex-row c-flex-center">
            查看
            <i class="iconfont c-pl10">&#xe635;</i>
          </div>
        </div>
      </div>
      <section class="c-bd-b12-f5 c-pb20">
        <div class="c-ph24 c-p">
          <template v-if="!distributionId">
            <div v-if="dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone" class="c-flex-column c-textAlign-c c-pv20">
              <span class="theme-fc icon iconfont c-fs46">&#xe8bc;</span>
              <span class="c-fc-xblack c-fs22 c-mt20">精彩内容，绑定手机号后可{{dataInfo.payType == 1 && dataInfo.isSaleOnly == 1 ? '免费' : ''}}观看</span>
            </div>
            <course-description v-show="!(dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone)" :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" ref="descriptions" :prodType="cfrom.course" :prodId="courseId"></course-description>
          </template>
          <div v-else class="tinymce-text c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll c-pt20" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
            v-html="dataInfo.detail"></div>
          <div class="c-flex-row c-flex-center c-pt30 c-pb40" v-if="cfg ? (cfg.enableLikes == 1 ? true : false) : false">
            <div class="c-fs28 c-ph24 c-textAlign-c c-pv12 c-br36 c-inline-center" :class="!dataInfo.isLike ? 'theme-bg theme-box-shadow' : 'c-bg-f2'" @click="clickLikes">
              <span class="c-fs28 c-fc-white c-mr10 iconfont" :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">&#xe684;</span>
              <span :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">{{dataInfo.likes | formatNumber}}</span>
            </div>
          </div>
        </div>
        <course-advocate style="border-bottom : 0" v-if="dataInfo.hasPermission" :dataInfo="dataInfo" @goCenterProduct="goCenterProduct"></course-advocate>
        <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
          <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
        </div>
        <div class="c-pt30 c-ph24" v-if="dataInfo.backgroundImgType != 3">
          <h2 class="c-fs22 c-fc-sblack c-textAlign-c">长按识别二维码关注微信公众号</h2>
          <span class="c-block iconfont c-textAlign-c c-fc-sgray c-fs18">&#xe70b;</span>
          <div class="qrbg c-textAlign-r c-pt24 c-pr20"
            :style="dataInfo.backgroundImgType == 2 ? 'backgroundImage:url(&quot;' + dataInfo.backgroundImgUrl + '&quot;)' : 'backgroundImage:url(' + require('@/assets/i/wap/course/ad.jpg') +')'">
            <img v-if="(dataInfo.backgroundImgType == 2 && dataInfo.isShowCode == 1 && dataInfo.mpQrcode) || (dataInfo.backgroundImgType == 1 && dataInfo.mpQrcode)" :src="$addXossFilter(dataInfo.mpQrcode)" :key="dataInfo.mpQrcode" class="c-ww180 c-hh180" />
          </div>
        </div>
      </section>
      <div id="datumPart" class="c-ph24 c-pb40 c-bd-b12-f5" v-if="dataInfo.relateDatumArr && dataInfo.relateDatumArr.length > 0">
        <div class="c-flex-row c-justify-sb c-pt30 c-pb12">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">课件</h2>
          <span @click="popRelatesDatumModal" class="c-fs20 c-fc-gray">查看全部</span>
        </div>
        <div v-for="(item, index) in dataInfo.relateDatumArr" :key="index">
          <div @click="clickGoDetail(item)" v-if="index < 3" class="c-flex-row c-pt20 c-pb20 c-fc-xmlred c-fs26" :class="index != dataInfo.relateDatumArr.length - 1 && index < 2 ? 'c-bd-b1' : ''">
            <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-text-hidden c-p">
              <img class="c-maxh c-maxw imgCloseBig c-br8" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" />
            </div>
            <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-justify-sb">
              <div class="c-fc-xblack c-fs24 c-text-ellipsis2">{{item.name}}</div>
              <template>
                <!-- <div v-if="item.prodType == 110 || item.prodType == 111 || item.prodType == 112 || item.prodType == 9 || item.prodType == 61" class="c-fc-gray c-fs20">{{item.isValid == 1 ? '长期有效' : (item.prodType == 9 || item.prodType == 61) && item.validDay ? (item.validDay + '天有效') : item.validTime ? (item.validTime + '天有效') : (item.validAt ? ('有效期至' + item.validAt) : '')}}</div> -->
                <!-- <div v-if="!(isFromOrder || hasBuy) && (item.relateType == 110 || item.relateType == 111 || item.relateType == 112 || item.relateType == 9 || item.relateType == 61)" class="c-fc-gray c-fs20">{{item.isValid == 1 ? '长期有效' : item.validDay && item.isValid == 0 ? (item.validDay + '天有效') : (item.validAt && item.isValid == 2 ? ('有效期至' + item.validAt) : '')}}</div> -->
                <div class="c-flex-row c-justify-sb c-aligni-center">
                  <div class="c-fc-xmlred c-fs22 c-pb8" v-if="item.payType == 3">加密</div>
                  <div class="c-fc-xmlred c-fs22 c-pb8" v-else-if="Number(item.prodPrice) == 0">免费</div>
                  <div class="c-fc-xmlred c-fs22 c-pb8" v-else><span>{{'￥' | iosPriceFilter}}</span>{{item.prodPrice | moneyStr}}</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-if="showInteractionPart" id="relatedPart" class="c-ph24 c-pb8 c-bd-b12-f5">
        <div class="c-pt30 c-pb32">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">互动</h2>
        </div>
        <div class="c-flex-row c-justify-sb c-flexw-wrap">
          <div v-if="showTurn" @click="goTOturn" class="c-ww284 c-hh120 c-pl24 c-flex-column c-justify-center interaction-p1-bg c-mb30 c-p">
            <div class="c-fs26"><span class="c-fw600">抽奖</span> <span class="iconfont c-fs20">&#xe635;</span></div>
            <div class="c-fs20 c-mt8">购买后参与大转盘</div>
            <img :src="require('@/assets/i/wap/course/interaction1.png')" class="c-ww72 c-pa c-p-b-8 c-p-r10" alt="">
          </div>
          <div v-if="interactionClockInList && interactionClockInList.length > 0" @click="popInteractionClockInList" class="c-ww284 c-hh120 c-pl24 c-flex-column c-justify-center interaction-p2-bg c-mb30 c-p">
            <div class="c-fs26"><span class="c-fw600">打卡</span> <span class="iconfont c-fs20">&#xe635;</span></div>
            <div class="c-fs20 c-mt8">关联{{interactionClockInList.length}}个打卡</div>
            <img :src="require('@/assets/i/wap/course/interaction2.png')" class="c-ww72 c-pa c-p-b-8 c-p-r10" alt="">
          </div>
          <div v-if="dataInfo.circleList && dataInfo.circleList.length > 0" @click="popCircleModal = true" class="c-ww284 c-hh120 c-pl24 c-flex-column c-justify-center interaction-p3-bg c-mb30 c-p">
            <div class="c-fs26"><span class="c-fw600">圈子</span> <span class="iconfont c-fs20">&#xe635;</span></div>
            <div class="c-fs20 c-mt8">关联{{dataInfo.circleList.length}}个圈子</div>
            <img :src="require('@/assets/i/wap/course/interaction3.png')" class="c-ww72 c-pa c-p-b-8 c-p-r10" alt="">
          </div>
          <div v-if="interactionExamList && interactionExamList.length > 0" @click="popInteractionExamList" class="c-ww284 c-hh120 c-pl24 c-flex-column c-justify-center interaction-p4-bg c-mb30 c-p">
            <div class="c-fs26"><span class="c-fw600">考试</span> <span class="iconfont c-fs20">&#xe635;</span></div>
            <div class="c-fs20 c-mt8">关联{{interactionExamList.length}}个考试</div>
            <img :src="require('@/assets/i/wap/course/interaction4.png')" class="c-ww72 c-pa c-p-b-8 c-p-r10" alt="">
          </div>
        </div>
      </div>
      <!-- <div class="c-ph24 c-pb40 c-bd-b12-f5" id="relatedPart" v-if="relatedList && relatedList.length > 0">
        <div class="c-flex-row c-justify-sb c-pt30 c-pb12">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">互动</h2>
          <span @click="popRelate" class="c-fs20 c-fc-gray">查看全部</span>
        </div>
        <div v-for="(item, index) in relatedList" :key="index">
          <div @click="goRevlantDetail(item.mainProdType, item.id,item)" v-if="index < 3" class="c-flex-row c-pt20 c-pb20 c-fc-xmlred c-fs26" :class="index != dataInfo.giftRelates.length - 1 && index < 2 ? 'c-bd-b1' : ''">
            <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-text-hidden c-p">
              <img class="c-maxh c-maxw imgCloseBig c-br8" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" />
              <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">{{item.mainProdType == 112 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</div>
            </div>
            <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-justify-sb">
              <div class="c-fc-xblack c-fs24 c-text-ellipsis2">{{item.name}}</div>
              <div v-if="item.mainProdType != 112 || (item.mainProdType == 112 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs20 c-fc-gray">{{item.number}}人参与</div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-ph24 c-pb40 c-bd-b12-f5" id="circlePart" v-if="dataInfo.circleList && dataInfo.circleList.length > 0">
        <div class="c-flex-row c-justify-sb c-pt30 c-pb12">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">圈子</h2>
        </div>
        <div v-for="(item, index) in dataInfo.circleList" :key="index">
          <div @click="joinCircle(item.circleId)" class="c-flex-row c-pt20 c-pb20 c-fc-xmlred c-fs26" :class="index != dataInfo.circleList.length - 1 && index < 2 ? 'c-bd-b1' : ''">
            <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-text-hidden c-p">
              <img class="c-maxh c-maxw imgCloseBig c-br8" :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" />
            </div>
            <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-justify-sb">
              <div class="c-fc-xblack c-fs24 c-text-ellipsis2">{{item.name}}</div>
              <div class="c-fs20 c-fc-gray">{{item.memberCount}}人参与</div>
            </div>
          </div>
        </div>
      </div> -->
      <more-device :positionType="1" class="c-bd-b12-f5" :prodInfo="{prodType: cfrom.course, prodId: courseId, courseType: 2, name: dataInfo.name}" v-if="dataInfo.hasPermission && typeBar == 0"></more-device>
      <package-index-com class="c-bd-b12-f5" id="seriesPart"
        :showPackageModal="true" :articleType="2" @clickGoAllPackage="clickGoAllPackage"
        :styleType="2" :relevantTitles="'包含该课程的系列课'" :showAll="true" :proType="1" :proId="courseId" :isHomePage="false"
        :packageList="dataInfo.combos.filter((item,index) => {return index == 0 || index == 1 || index == 2})"
        v-if="dataInfo && dataInfo.combos.length > 0">
      </package-index-com>
      <div class="c-bd-b12-f5" id="recommendPart"
        v-if="relationData &&
          (relationData.circle.length > 0 || relationData.courses.length > 0 || relationData.goods.length > 0
            || relationData.socials.length > 0 || relationData.exams.length > 0 || relationData.datums.length > 0
            || relationData.ebooks.length > 0 || relationData.columns.length > 0 || relationData.mutuals.length > 0
            || relationData.normalPapers.length > 0 || relationData.shortPapers.length > 0 || relationData.signColumns.length > 0
            || relationData.speechs.length > 0
          )"
      >
        <div class="c-flex-row c-justify-sb c-ph24 c-pt30">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">推荐</h2>
          <span @click="popAllRelate = true" class="c-fs20 c-fc-gray">查看全部</span>
        </div>
        <active-and-column :isShowAll="false" :articleType="2" :styleType="2" :courseList="relationData.courses" :goodsList="relationData.goods" :soicalList="relationData.socials" :examList="relationData.exams"
          :speechList="relationData.speechs" :mutualList="relationData.mutuals" :datumList="relationData.datums" :eBookList="relationData.ebooks" :circleList="relationData.circle"></active-and-column>
      </div>
      <div id="giftPart" class="c-ph24 c-pb40 c-bd-b12-f5" v-if="dataInfo.giftRelates && dataInfo.giftRelates.length > 0">
        <div class="c-flex-row c-justify-sb c-pt30 c-pb12">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">赠品</h2>
          <span @click="popGiftModal" class="c-fs20 c-fc-gray">查看全部</span>
        </div>
        <div v-for="(item, index) in dataInfo.giftRelates" :key="index">
          <div @click="clickGoDetail(item)" v-if="index < 3" class="c-flex-row c-pt20 c-pb20 c-fc-xmlred c-fs26" :class="index != dataInfo.giftRelates.length - 1 && index < 2 ? 'c-bd-b1' : ''">
            <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-text-hidden c-p">
              <vip-custom-img :cover="item.relateCover" :imgClass="'imgCloseBig c-br12 c-maxh120'" :fontClass="{
                boxStyle: 'c-pv20 c-pl12',
                name: 'c-fs24 c-text-ellipsis1 c-fw-b',
                duration: 'c-fs18'}" :content="{name: item.relateName, duration: item.duration, durationType: item.durationType}" v-if="item.prodType == cfrom.vip || item.prodType == cfrom.svip" />
              <img v-else class="c-maxh c-maxw imgCloseBig c-br8" :src="$addXossFilter(item.relateCover, require('../../../assets/defult270.png'))" />
              <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">{{typeTextMap[item.prodType]}}</div>
            </div>
            <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-justify-sb">
              <div class="c-fc-xblack c-fs24 c-text-ellipsis2">{{item.relateName}}</div>
              <template>
                <!-- <div v-if="item.prodType == 110 || item.prodType == 111 || item.prodType == 112 || item.prodType == 9 || item.prodType == 61" class="c-fc-gray c-fs20">{{item.isValid == 1 ? '长期有效' : (item.prodType == 9 || item.prodType == 61) && item.validDay ? (item.validDay + '天有效') : item.validTime ? (item.validTime + '天有效') : (item.validAt ? ('有效期至' + item.validAt) : '')}}</div> -->
                <!-- <div v-if="!(isFromOrder || hasBuy) && (item.relateType == 110 || item.relateType == 111 || item.relateType == 112 || item.relateType == 9 || item.relateType == 61)" class="c-fc-gray c-fs20">{{item.isValid == 1 ? '长期有效' : item.validDay && item.isValid == 0 ? (item.validDay + '天有效') : (item.validAt && item.isValid == 2 ? ('有效期至' + item.validAt) : '')}}</div> -->
                <div class="c-flex-row c-justify-sb c-aligni-center">
                  <div class="c-fc-xmlred c-fs22" v-if="item.isSaleOnly == 0 && item.isSaleTogether">关联售卖</div>
                  <div class="c-fc-xmlred c-fs22" v-else-if="item.payType == 3">加密</div>
                  <div class="c-fc-xmlred c-fs22" v-else-if="Number(item.relateProdPrice) == 0">免费</div>
                  <div class="c-fc-xmlred c-fs26" v-else><span>{{'￥' | iosPriceFilter}}</span>{{item.relateProdPrice | moneyStr}}</div>
                  <div @click.stop="clickBtn(item)" v-if="(item.status == 0 && item.prodType == 12 && (isFromOrder || hasBuy)) || (item.receiveStatus != 1 && item.relateType == 12 && !isFromOrder && !hasBuy)" class="c-fs22 c-fc-white theme-bg c-ww100 c-hh40 c-flex-row c-flex-center c-br20">兑换</div>
                  <div @click.stop="clickBtn(item)" v-else class="c-fs22 theme-fc theme-bd1 c-ww100 c-hh40 c-flex-row c-flex-center c-br20">查看</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-if="commentStatus == 1" id="commentPart">
        <div class="c-flex-row c-justify-sb c-ph24 c-pt30 c-pb24">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">评论</h2>
        </div>
        <commentCom ref="commentCom" v-show="commentStatus == 1" :smallText="true" :moduleType="distributionId ? 2 : 1" :prodType="cfrom.course" :prodId="courseId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount" @handleClickPlaint="handleClickPlaint"></commentCom>
        <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
          <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
        </div>
      </div>
    </template>
    <template v-else-if="articleType == 3">
      <my-small-tabbar class="c-bg-white c-hh76 c-bd-b1-f6 c-ph24 tabhBar" v-if="showSmallTabbar" :styleType="2" :tabList="typeTabList" :tabIndex="articleTypeBar" @changeTab="articleChangeType"></my-small-tabbar>
      <div class="c-p imagesType">
        <swiper v-if="swiperImgList.length > 0" id="mySwiper" ref="mySwiper" :options="swiperOption" class="c-bg-white c-p c-flex-row">
          <swiper-slide v-for="(item, index) in swiperImgList" :key="index" class="c-p">
            <div class="c-flex-row c-flex-center c-p" @click="clickSwiperImg(index)">
              <img :class="'swiper-img' + index" class="c-w100" :src="$addXossFilter(item.imgUrl)">
              <!-- <img class="c-w100 c-h c-pa c-p-t0 c-p-l0" :src="$addXossFilter(item.imgUrl)">
              <div class="c-w100 c-h c-pa c-p-t0 c-p-l0 glass c-translucent-balck30 c-pz1">
                <div class="c-w100 c-h backdropFilter-more"></div>
              </div> -->
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination">
            <!-- <div class="c-pa c-p-r0 c-p-b0 c-pr24 c-ww100 c-pb28 c-flex-row c-justify-end">
              <div class="swiper-page-tag c-fs20 c-flex-row c-flex-center">
                {{swiperIndex + 1}}/{{swiperImgList.length}}
              </div>
            </div> -->
          </div>
        </swiper>
        <div v-show="showImgCount" class="c-pa c-p-l24 c-p-t24 c-pz99">
          <div class="swiper-page-tag c-fs20 c-flex-row c-flex-center">
            {{swiperIndex + 1}}/{{swiperImgList.length}}
          </div>
        </div>
      </div>
      <div id="topDetail">
        <div class="c-ph24 c-pt30">
          <span class="c-fs30 c-fc-xblack c-fw600">{{dataInfo.name}}</span>
        </div>
        <div class="c-flex-row c-aligni-center c-ph24 c-pb16 c-mt16 c-w100">
          <div class="c-w0 c-flex-grow1">
            <div class="c-fs20 c-fc-gray c-flex-row c-aligni-center c-flexw-wrap">
              <!-- <div class="c-mr20 c-pv4"><span class="c-fs20 iconfont c-mr4">&#xe624;</span>共{{dataInfo != "" && dataInfo.items != null ? dataInfo.dirCount : 0}}节</div> -->
              <div class="c-flex-row c-aligni-center c-pv4 c-mr20" v-if="dataInfo.isSaleOnly == 1">
                <span class="c-fs20 iconfont c-mr4">&#xe7a6;</span>
                <valid-time-com :dataInfo="dataInfo" :prodId="courseId" :prodType="cfrom.course"></valid-time-com>
              </div>
              <div v-if="!distributionId && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))"><span class="c-fs20 iconfont c-mr4 c-pv4">&#xe6bb;</span>{{dataInfo.plays | formatNumber}}人观看</div>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center">
            <div v-if="dataInfo.showPresentFriend && !isiOS && !$isWxApp()" class="c-flex-column c-aligni-center c-ww52 c-mr8 coms-live-iframe-none" @click="popPresentCourse">
              <div class="iconfont c-fs36 c-fc-xblack">&#xe7b9;</div>
              <div class="c-fs16 c-fc-xblack c-mt4">赠送</div>
            </div>
            <collect-btn-com v-if="!distributionId" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.course" :prodId="courseId" :subProdType="2" class="" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
          </div>
        </div>
        <!-- 引导入群 -->
        <invite-group class="c-pr24 c-pb24"
          v-if="showInviteGroup"
          :guideText="dataInfo.guideData.guideDesc"
          @handleShowGuidePop="handleShowGuidePop"
        >
        </invite-group>
      </div>
      <!-- 非强制表单 -->
      <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3&& dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
        relType="1"  :relId="courseId"  :dataInfo="dataInfo"
        classObject="c-fs24 c-fw600" fontSizeClass="c-fs22" iconSizeClass="c-fs18" topClass="c-bd-b12-f5 c-bd-t12-f5"
        @goForm="goForm" ></formEntry>
      <!-- 非强制表单 -->
      <!-- <div class="c-bd-b12-f5" v-if="(dataInfo.collectPage==3 && dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true)">
        <div @click="goForm()" class="c-ph24 c-hh100 c-lh100 c-flex-row c-aligni-center c-justify-sb">
          <div class="c-w0 c-flex-grow1 c-fs26 c-fc-xblack c-fw600">报名信息</div>
          <div class="c-fs26 c-fc-gray c-mr10">{{dataInfo.hasFormLog&&dataInfo.enableEdit==2?'点击修改':'填写报名信息'}}</div>
          <div class="iconfont c-fs20 c-fc-gray">&#xe60e;</div>
        </div>
      </div> -->
      <!-- 领取证书 -->
      <div v-if="showStudyCard" class="c-ph24 c-pv20 c-bd-b12-f5" @click="handleClickCertificate()">
        <div class="badge-bg c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv20">
          <div class="c-ww36 c-hh40">
            <img :src="require('@/assets/i/wap/camp/medal.png')" class="c-w100 c-h c-object-fit-c" alt="">
          </div>
          <div class="c-w0 c-flex-column c-flex-grow1 c-justify-sb c-ph10">
            <div class="c-fc-A2743D c-fs28 c-fw600 c-text-ellipsis1">恭喜您获得学习证书</div>
          </div>
          <div class="c-fs22 c-fc-A2743D c-flex-row c-flex-center">
            查看
            <i class="iconfont c-pl10">&#xe635;</i>
          </div>
        </div>
      </div>
      <lecturer-com class="c-pt24 c-pb10" v-if="dataInfo.lecturers && dataInfo.lecturers.length > 0" :lecturersArr="dataInfo.lecturers" :courseId="courseId" :showLecturerModal="showLecturerModal" @closeDetailModal="showLecturerModal=false" @clickLecturer="clickLecturer"></lecturer-com>
      <section class="c-bd-b12-f5 c-pb20">
        <div class="c-ph24 c-p">
          <template v-if="!distributionId">
            <div v-if="dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone" class="c-flex-column c-textAlign-c c-pv20">
              <span class="theme-fc icon iconfont c-fs46">&#xe8bc;</span>
              <span class="c-fc-xblack c-fs22 c-mt20">精彩内容，绑定手机号后可{{dataInfo.payType == 1 && dataInfo.isSaleOnly == 1 ? '免费' : ''}}观看</span>
            </div>
            <course-description v-show="!(dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone)" :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" ref="descriptions" :prodType="cfrom.course" :prodId="courseId"></course-description>
          </template>
          <div v-else class="tinymce-text c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll c-pt20" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
            v-html="dataInfo.detail"></div>
          <div class="c-flex-row c-flex-center c-pt30 c-pb40" v-if="cfg ? (cfg.enableLikes == 1 ? true : false) : false">
            <div class="c-fs28 c-ph24 c-textAlign-c c-pv12 c-br36 c-inline-center" :class="!dataInfo.isLike ? 'theme-bg theme-box-shadow' : 'c-bg-f2'" @click="clickLikes">
              <span class="c-fs28 c-fc-white c-mr10 iconfont" :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">&#xe684;</span>
              <span :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">{{dataInfo.likes | formatNumber}}</span>
            </div>
          </div>
        </div>
        <course-advocate style="border-bottom : 0" v-if="dataInfo.hasPermission" :dataInfo="dataInfo" @goCenterProduct="goCenterProduct"></course-advocate>
        <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
          <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
        </div>
        <div class="c-pt30 c-ph24" v-if="dataInfo.backgroundImgType != 3">
          <h2 class="c-fs22 c-fc-sblack c-textAlign-c">长按识别二维码关注微信公众号</h2>
          <span class="c-block iconfont c-textAlign-c c-fc-sgray c-fs18">&#xe70b;</span>
          <div class="qrbg c-textAlign-r c-pt24 c-pr20"
            :style="dataInfo.backgroundImgType == 2 ? 'backgroundImage:url(&quot;' + dataInfo.backgroundImgUrl + '&quot;)' : 'backgroundImage:url(' + require('@/assets/i/wap/course/ad.jpg') +')'">
            <img v-if="(dataInfo.backgroundImgType == 2 && dataInfo.isShowCode == 1 && dataInfo.mpQrcode) || (dataInfo.backgroundImgType == 1 && dataInfo.mpQrcode)" :src="$addXossFilter(dataInfo.mpQrcode)" :key="dataInfo.mpQrcode" class="c-ww180 c-hh180" />
          </div>
        </div>
      </section>
      <div id="datumPart" class="c-ph24 c-pb40 c-bd-b12-f5" v-if="dataInfo.relateDatumArr && dataInfo.relateDatumArr.length > 0">
        <div class="c-flex-row c-justify-sb c-pt30 c-pb12">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">课件</h2>
          <span @click="popRelatesDatumModal" class="c-fs20 c-fc-gray">查看全部</span>
        </div>
        <div v-for="(item, index) in dataInfo.relateDatumArr" :key="index">
          <div @click="clickGoDetail(item)" v-if="index < 3" class="c-flex-row c-pt20 c-pb20 c-fc-xmlred c-fs26" :class="index != dataInfo.relateDatumArr.length - 1 && index < 2 ? 'c-bd-b1' : ''">
            <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-text-hidden c-p">
              <img class="c-maxh c-maxw imgCloseBig c-br8" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" />
            </div>
            <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-justify-sb">
              <div class="c-fc-xblack c-fs24 c-text-ellipsis2">{{item.name}}</div>
              <template>
                <!-- <div v-if="item.prodType == 110 || item.prodType == 111 || item.prodType == 112 || item.prodType == 9 || item.prodType == 61" class="c-fc-gray c-fs20">{{item.isValid == 1 ? '长期有效' : (item.prodType == 9 || item.prodType == 61) && item.validDay ? (item.validDay + '天有效') : item.validTime ? (item.validTime + '天有效') : (item.validAt ? ('有效期至' + item.validAt) : '')}}</div> -->
                <!-- <div v-if="!(isFromOrder || hasBuy) && (item.relateType == 110 || item.relateType == 111 || item.relateType == 112 || item.relateType == 9 || item.relateType == 61)" class="c-fc-gray c-fs20">{{item.isValid == 1 ? '长期有效' : item.validDay && item.isValid == 0 ? (item.validDay + '天有效') : (item.validAt && item.isValid == 2 ? ('有效期至' + item.validAt) : '')}}</div> -->
                <div class="c-flex-row c-justify-sb c-aligni-center">
                  <div class="c-fc-xmlred c-fs22 c-pb8" v-if="item.payType == 3">加密</div>
                  <div class="c-fc-xmlred c-fs22 c-pb8" v-else-if="Number(item.prodPrice) == 0">免费</div>
                  <div class="c-fc-xmlred c-fs22 c-pb8" v-else><span>{{'￥' | iosPriceFilter}}</span>{{item.prodPrice | moneyStr}}</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-if="showInteractionPart" id="relatedPart" class="c-ph24 c-pb8 c-bd-b12-f5">
        <div class="c-pt30 c-pb32">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">互动</h2>
        </div>
        <div class="c-flex-row c-justify-sb c-flexw-wrap">
          <div v-if="showTurn" @click="goTOturn" class="c-ww284 c-hh120 c-pl24 c-flex-column c-justify-center interaction-p1-bg c-mb30 c-p">
            <div class="c-fs26"><span class="c-fw600">抽奖</span> <span class="iconfont c-fs20">&#xe635;</span></div>
            <div class="c-fs20 c-mt8">购买后参与大转盘</div>
            <img :src="require('@/assets/i/wap/course/interaction1.png')" class="c-ww72 c-pa c-p-b-8 c-p-r10" alt="">
          </div>
          <div v-if="interactionClockInList && interactionClockInList.length > 0" @click="popInteractionClockInList" class="c-ww284 c-hh120 c-pl24 c-flex-column c-justify-center interaction-p2-bg c-mb30 c-p">
            <div class="c-fs26"><span class="c-fw600">打卡</span> <span class="iconfont c-fs20">&#xe635;</span></div>
            <div class="c-fs20 c-mt8">关联{{interactionClockInList.length}}个打卡</div>
            <img :src="require('@/assets/i/wap/course/interaction2.png')" class="c-ww72 c-pa c-p-b-8 c-p-r10" alt="">
          </div>
          <div v-if="dataInfo.circleList && dataInfo.circleList.length > 0" @click="popCircleModal = true" class="c-ww284 c-hh120 c-pl24 c-flex-column c-justify-center interaction-p3-bg c-mb30 c-p">
            <div class="c-fs26"><span class="c-fw600">圈子</span> <span class="iconfont c-fs20">&#xe635;</span></div>
            <div class="c-fs20 c-mt8">关联{{dataInfo.circleList.length}}个圈子</div>
            <img :src="require('@/assets/i/wap/course/interaction3.png')" class="c-ww72 c-pa c-p-b-8 c-p-r10" alt="">
          </div>
          <div v-if="interactionExamList && interactionExamList.length > 0" @click="popInteractionExamList" class="c-ww284 c-hh120 c-pl24 c-flex-column c-justify-center interaction-p4-bg c-mb30 c-p">
            <div class="c-fs26"><span class="c-fw600">考试</span> <span class="iconfont c-fs20">&#xe635;</span></div>
            <div class="c-fs20 c-mt8">关联{{interactionExamList.length}}个考试</div>
            <img :src="require('@/assets/i/wap/course/interaction4.png')" class="c-ww72 c-pa c-p-b-8 c-p-r10" alt="">
          </div>
        </div>
      </div>
      <more-device :positionType="1" class="c-bd-b12-f5" :prodInfo="{prodType: cfrom.course, prodId: courseId, courseType: 2, name: dataInfo.name}" v-if="dataInfo.hasPermission && typeBar == 0"></more-device>
      <package-index-com class="c-bd-b12-f5" id="seriesPart"
        :showPackageModal="true" :articleType="2" @clickGoAllPackage="clickGoAllPackage"
        :styleType="2" :relevantTitles="'包含该课程的系列课'" :showAll="true" :proType="1" :proId="courseId" :isHomePage="false"
        :packageList="dataInfo.combos.filter((item,index) => {return index == 0 || index == 1 || index == 2})"
        v-if="dataInfo && dataInfo.combos.length > 0">
      </package-index-com>
      <div class="c-bd-b12-f5" id="recommendPart"
        v-if="relationData &&
          (relationData.circle.length > 0 || relationData.courses.length > 0 || relationData.goods.length > 0
            || relationData.socials.length > 0 || relationData.exams.length > 0 || relationData.datums.length > 0
            || relationData.ebooks.length > 0 || relationData.columns.length > 0 || relationData.mutuals.length > 0
            || relationData.normalPapers.length > 0 || relationData.shortPapers.length > 0 || relationData.signColumns.length > 0
            || relationData.speechs.length > 0
          )"
      >
        <div class="c-flex-row c-justify-sb c-ph24 c-pt30">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">推荐</h2>
          <span @click="popAllRelate = true" class="c-fs20 c-fc-gray">查看全部</span>
        </div>
        <active-and-column
          :isShowAll="false"
          :articleType="2"
          :styleType="2"
          :courseList="relationData.courses"
          :goodsList="relationData.goods"
          :soicalList="relationData.socials"
          :examList="relationData.exams"
          :speechList="relationData.speechs"
          :mutualList="relationData.mutuals"
          :datumList="relationData.datums"
          :eBookList="relationData.ebooks"
          :circleList="relationData.circle"
        >
        </active-and-column>
      </div>
      <div id="giftPart" class="c-ph24 c-pb40 c-bd-b12-f5" v-if="dataInfo.giftRelates && dataInfo.giftRelates.length > 0">
        <div class="c-flex-row c-justify-sb c-pt30 c-pb12">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">赠品</h2>
          <span @click="popGiftModal" class="c-fs20 c-fc-gray">查看全部</span>
        </div>
        <div v-for="(item, index) in dataInfo.giftRelates" :key="index">
          <div @click="clickGoDetail(item)" v-if="index < 3" class="c-flex-row c-pt20 c-pb20 c-fc-xmlred c-fs26" :class="index != dataInfo.giftRelates.length - 1 && index < 2 ? 'c-bd-b1' : ''">
            <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-text-hidden c-p">
              <vip-custom-img :cover="item.relateCover" :imgClass="'imgCloseBig c-br12 c-maxh120'" :fontClass="{
                boxStyle: 'c-pv20 c-pl12',
                name: 'c-fs24 c-text-ellipsis1 c-fw-b',
                duration: 'c-fs18'}" :content="{name: item.relateName, duration: item.duration, durationType: item.durationType}" v-if="item.prodType == cfrom.vip || item.prodType == cfrom.svip" />
              <img v-else class="c-maxh c-maxw imgCloseBig c-br8" :src="$addXossFilter(item.relateCover, require('../../../assets/defult270.png'))" />
              <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">{{typeTextMap[item.prodType]}}</div>
            </div>
            <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-justify-sb">
              <div class="c-fc-xblack c-fs24 c-text-ellipsis2">{{item.relateName}}</div>
              <template>
                <!-- <div v-if="item.prodType == 110 || item.prodType == 111 || item.prodType == 112 || item.prodType == 9 || item.prodType == 61" class="c-fc-gray c-fs20">{{item.isValid == 1 ? '长期有效' : (item.prodType == 9 || item.prodType == 61) && item.validDay ? (item.validDay + '天有效') : item.validTime ? (item.validTime + '天有效') : (item.validAt ? ('有效期至' + item.validAt) : '')}}</div> -->
                <!-- <div v-if="!(isFromOrder || hasBuy) && (item.relateType == 110 || item.relateType == 111 || item.relateType == 112 || item.relateType == 9 || item.relateType == 61)" class="c-fc-gray c-fs20">{{item.isValid == 1 ? '长期有效' : item.validDay && item.isValid == 0 ? (item.validDay + '天有效') : (item.validAt && item.isValid == 2 ? ('有效期至' + item.validAt) : '')}}</div> -->
                <div class="c-flex-row c-justify-sb c-aligni-center">
                  <div class="c-fc-xmlred c-fs22" v-if="item.isSaleOnly == 0 && item.isSaleTogether">关联售卖</div>
                  <div class="c-fc-xmlred c-fs22" v-else-if="item.payType == 3">加密</div>
                  <div class="c-fc-xmlred c-fs22" v-else-if="Number(item.relateProdPrice) == 0">免费</div>
                  <div class="c-fc-xmlred c-fs26" v-else><span>{{'￥' | iosPriceFilter}}</span>{{item.relateProdPrice | moneyStr}}</div>
                  <div @click.stop="clickBtn(item)" v-if="(item.status == 0 && item.prodType == 12 && (isFromOrder || hasBuy)) || (item.receiveStatus != 1 && item.relateType == 12 && !isFromOrder && !hasBuy)" class="c-fs22 c-fc-white theme-bg c-ww100 c-hh40 c-flex-row c-flex-center c-br20">兑换</div>
                  <div @click.stop="clickBtn(item)" v-else class="c-fs22 theme-fc theme-bd1 c-ww100 c-hh40 c-flex-row c-flex-center c-br20">查看</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-if="commentStatus == 1" id="commentPart">
        <div class="c-flex-row c-justify-sb c-ph24 c-pt30 c-pb24">
          <h2 class="c-fw-n c-fc-xblack c-fw-b c-p c-fs24">评论</h2>
        </div>
        <commentCom ref="commentCom" v-show="commentStatus == 1" :smallText="true" :moduleType="distributionId ? 2 : 1" :prodType="cfrom.course" :prodId="courseId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount" @handleClickPlaint="handleClickPlaint"></commentCom>
        <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
          <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
        </div>
      </div>
    </template>
    <section v-show="commentStatus == 1 && typeBar == 2" @click="addComment('')" class="c-ph24 c-bg-white c-hh88 c-aligni-center c-flex-row c-pf c-w100 c-maxw640 c-p-b0 c-pz9 c-box-shadow5">
      <div class="c-hh60 c-w0 c-flex-grow1 c-lh64 c-textAlign-c c-fs24 c-ph20 c-fc-gray c-bg-f2 c-br30"> 请输入评论内容</div>
    </section>
    <!-- 入群引导 -->
    <group-guidance ref="guidance" position="bottom" :isType="true" :groupObject="dataInfo.guideData"></group-guidance>
    <!-- 圈子学习计划跳转-目录导航 -->
    <circle-learn-nav :planId="circleQuery.planId" :circleId="circleQuery.circleId"></circle-learn-nav>
    <AppComplain :showReport.sync="showReport" />
    <!-- <more-device :positionType="2" :hasBottomBar="hasBottomBar" :prodInfo="{prodType: cfrom.course, prodId: courseId, courseType: 2, name: dataInfo.name}" v-if="!$isWxApp() && isWeChat && dataInfo.hasPermission && cfg && cfg.enableMultiLearning == 1 && (cfg.multiLearningPage & 1) == 1 && cfg.multiLearningType > 1 && typeBar == 0 && (articleType == 2 || articleType == 3)"></more-device> -->
    <!--没权限 || 非分销并且开通邀请卡 || 需要展示赠送好友，底部肯定有显示内容 -->
    <bottom-buy-com
      v-if="hasBottomBar"
      ref="bottomBuy" :isNeedPay="!dataInfo.hasPermission && dataInfo.payType == 2" :showCommentBtn="showCommentBtnComputed" :columnPermission="columnPermission" :isGroupPurchase="styleType == 2 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments !=1"
      :showNotSale="dataInfo.isSaleOut == 0 && !dataInfo.hasPermission&&dataInfo.payType!=3" :notSale="dataInfo.isSaleOut == 0" :ckFrom="ckFrom" :showShareMoneyTip="showShareMoneyTip"
      :deductibleAfterInvition="dataInfo.commission" :showPresentFriend="styleType == 2 || (dataInfo.hasPermission && (articleType == 2 || articleType == 3)) ? false : dataInfo.showPresentFriend"
      :showBuyButton="dataInfo.showBuyButton" :showFriendHelper="dataInfo.showFriendHelper" :friendHelperStatus="faStatus" :showFormText="showFormText" :isDistribution="distributionId != '' && distributionId != undefined && distributionId != null ? true : false"
      :isNew="true" :barLeftStatus="bottomBuyDirection" :isSaleTogether="dataInfo.isSaleTogether == 1 ? true : false" :nextLessons="nextLessons" :prevLessons="prevLessons" :extColumnId="fromColumnId" :isOffSale="isOffSale" :hasExpired="hasExpired" :showFirstScroll="showFirstScroll"
      :timingPutOn="timingPutOn" :delayTime="dataInfo.delayTime" @clickBuyNow="clickBuyNow" @spreadInvite="inviteFriends" @invitePoster="invitePoster" @goHelpDetail="goHelpDetail" @goFormDetail="goForm" @goColumnCourse="goColumnCourse" @goToTop="goToTop" @putOn="putOn" @closeFirstScroll="closeFirstScroll" @clickComment="clickCommentBtn"
      @popColumnList="popColumnList" :extCampId="ttId" :campButtonStatus="campButtonStatus" @handleCampDirectory="handleCampDirectory" @groupPurchase="showGpModal=true;"
    >
      <slot>
        <div v-if="isStoreUserGroup" class="c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
          <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1 bg-ccc">仅指定组织成员可{{dataInfo.payType == 2 && !$isWxAppIos() ? '购买' : '观看'}}</div>
        </div>
        <div v-else-if="isUserGroup" class="c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
          <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1 bg-ccc">仅指定用户可{{dataInfo.payType == 2 && !$isWxAppIos() ? '购买' : '观看'}}</div>
        </div>
        <div v-else :class="styleType == 1 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments !=1 ? 'c-fs26' : 'c-fs28'" class="c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
          <div v-if="styleType == 1 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments !=1" @click="showGpModal=true;" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">团购</div>
          <!-- 营销活动并且不关联专栏的时候（不用展示所属专栏和返回专栏），则把营销活动的按钮分开展示 -->
          <template
            v-if="!dataInfo.hasPermission &&
              (((ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)) ||
                (!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.isFriendHelper && ckFrom == cfrom.course && dataInfo.collage == null) ||
                (dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)))"
          >
            <div v-if="!((ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1)" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1" @click="clickBuyNow">
              <span class="c-fs24">{{getBuyBtnTitle}}</span>
              <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
            </div>
            <div v-if="(ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1" @click="goCollageDetail(dataInfo.collage.groupId,dataInfo.collage.collageId)" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">
              拼团中...
            </div>
            <div v-else-if="(ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1) && dataInfo.collage.userType == -1" @click="goBuy(-1,dataInfo.collage.collageId)" :class="dataInfo.collage.status == 1 ? 'c-bg-ccc' : 'theme-bg-gradient'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
              <span class="c-fs24">发起拼团</span>
              <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{Number(dataInfo.collage.captainPrice).toFixed(2)}}</span>
            </div>
            <div v-else-if="!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.isFriendHelper && ckFrom == cfrom.course && dataInfo.collage == null" @click="goHelpDetail" :class="faStatus == 2 ? 'theme-bg-gradient' : 'c-bg-ccc'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
              <span class="c-fs24">灌溉领取</span>
              <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}0.00</span>
            </div>
            <div v-else-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2) && dataInfo.bargain.userType == 1" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)" class="c-hh64 c-flex-row c-flex-center c-pt4 c-w0 c-flex-grow1">
              正在砍价
            </div>
            <div v-else-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)" :class="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? 'c-bg-ccc' : 'theme-bg-gradient'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
              <span class="c-fs24">砍价享</span>
              <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{Number(dataInfo.bargain.reservePrice).toFixed(2)}}</span>
            </div>
          </template>
          <!-- 专栏下再不展示购买等按钮，统一引导到专栏去购买 -->
          <template v-else>
            <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" v-if="!dataInfo.hasPermission && dataInfo.isSaleTogether == 1 && Number(fromColumnId) == -1" @click="backPackage()">所属课程</div>
            <div v-if="(dataInfo.isSaleTogether == 1 || (distributionId != '' && distributionId != undefined && distributionId != null)) && Number(fromColumnId) != -1 && !columnPermission" @click="goColumn()" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">{{(distributionId != '' && distributionId != undefined && distributionId != null) ? '返回专栏' : '订阅专栏'}}</div>
            <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" v-if="dataInfo.hasPermission && bindPhoneSetting.getBind && !hasModalBindPhone && !distributionId" @click="goBindMobile()">立即绑定</div>
            <template v-if="!dataInfo.hasPermission && dataInfo.isSaleOnly == 1">
              <div
                v-if="dataInfo.bargain == null && dataInfo.isSaleOnly == 1 && dataInfo.payType == 2 && (!dataInfo.isFriendHelper || companyAuth.enableFriendHelper == 0) && (ckFrom == cfrom.course || ckFrom == cfrom.column)"
                class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="clickBuyNow"
              >
                {{ckFrom == cfrom.course ? '立即购买' : (ckFrom == cfrom.column && dataInfo.isFreeInColumn == 2 ? '购买单课' : '专栏')}}
              </div>
              <div
                v-if="dataInfo.bargain == null && dataInfo.isSaleOnly == 1 && dataInfo.payType == 3 && (!dataInfo.isFriendHelper || companyAuth.enableFriendHelper == 0) && (ckFrom == cfrom.course || ckFrom == cfrom.column)"
                class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="inputPsw"
              >
                {{ckFrom == cfrom.course ? '输入密码' : (ckFrom == cfrom.column && dataInfo.isFreeInColumn == 2 ? '输入密码' : '专栏')}}
              </div>
              <div
                v-if="(ckFrom == cfrom.flashSalesCourse || ckFrom == cfrom.flashSalesColumn) && !dataInfo.hasPermission"
                class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="clickBuyNow"
              >
                {{getBuyBtnTitle}}
              </div>
              <div
                v-if="(ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1"
                class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="goCollageDetail(dataInfo.collage.groupId,dataInfo.collage.collageId)"
              >
                拼团中...
              </div>
              <div
                v-if="(ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1) && dataInfo.collage.userType == -1"
                class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
              >
                购买
                <marketing-buy-btn
                  :isCollage="true"
                  :showMarketingBuyBtn="showMarketingBuyBtn"
                  :calculationPrice="calculationPrice"
                  :marketingPrice="Number(dataInfo.collage.captainPrice).toFixed(2)"
                  :btnActivate="dataInfo.collage.status == 1 ? false : true"
                  @clickBuyNow="clickBuyNow"
                  @marketingBuy="goBuy(-1,dataInfo.collage.collageId)">
                </marketing-buy-btn>
              </div>
              <div
                v-if="!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.isFriendHelper && ckFrom == cfrom.course && dataInfo.collage == null"
                class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
              >
                灌溉领取
                <marketing-buy-btn
                  :isFriendHelp="true"
                  :showMarketingBuyBtn="showMarketingBuyBtn"
                  :calculationPrice="calculationPrice"
                  :btnActivate="faStatus == 2 ? true : false"
                  @clickBuyNow="clickBuyNow"
                  @marketingBuy="goHelpDetail">
                </marketing-buy-btn>
              </div>
              <div
                v-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)"
                class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
              >
                购买
                <marketing-buy-btn
                  :isBargain="true"
                  :showMarketingBuyBtn="showMarketingBuyBtn"
                  :calculationPrice="calculationPrice"
                  :marketingPrice="Number(dataInfo.bargain.reservePrice).toFixed(2)"
                  :btnActivate="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? false : true"
                  :isBargaining="dataInfo.bargain.userType == 1 ? true : false"
                  @clickBuyNow="clickBuyNow"
                  @marketingBuy="handleClickBargainDetail(dataInfo.bargain.bargainId)">
                </marketing-buy-btn>
              </div>
            </template>
          </template>
        </div>
      </slot>
    </bottom-buy-com>

    <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker>
    <show-integrate :showIntegrate="showIntegrate" :integrateCount="integrateCount" v-if="showIntegrate" @closeShareInt="showIntegrate=false;"></show-integrate>
    <!-- 专栏关联课程 -->
    <relate-column-list :showColumnList="showColumnList" :columnPermission="columnPermission" :dataInfo="dataInfo" :courseId="courseId" :extColumnId="extColumnId" :distributionId="distributionId" :learningPosition="learningPosition"
      :isInitData="isInitData" :currentIndex="currentIndex" :columnCourseIndex="columnCourseIndex"
      @hideColumnList="hideColumnList" @clickClassItem="clickClassItem" @goColumnCourse="goColumnCourse">
    </relate-column-list>
    <open-modal class="c-pz10000" :openModal='popRelateCourse' @closeModal='popRelateCourse = false;popInteractionType = 1;'>
      <div class="c-bg-white c-pv30 c-ph24 c-br-tl20 c-br-tr20">
        <div class="c-fs26 c-fc-sblack c-fw600">搭配学习</div>
        <div class="c-maxh500 c-minh110 c-mt32 c-contexty-scroll">
          <div class="c-flex-row c-hh100 c-aligni-center" :class="index+1 == (popInteractionType == 2 ? interactionExamList : popInteractionType == 3 ? interactionClockInList : relatedList).length ? '' : 'c-mb20'" v-for="(item, index) in (popInteractionType == 2 ? interactionExamList : popInteractionType == 3 ? interactionClockInList : relatedList)" :key="index"
            @click="goRevlantDetail(item.mainProdType, item.id,item)">
            <div class="c-ww150 c-hh100 c-text-hidden c-br8 c-p">
              <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{item.mainProdType == 112 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</div>
              <img :src="$addXossFilter(item.cover)" alt="">
            </div>
            <div class="c-flex-grow1 c-w0 c-hh100 c-ph20 c-fs24 c-fw400 c-flex-column c-justify-sb">
              <p class="c-text-ellipsis2">{{item.name}}</p>
              <p v-if="item.mainProdType != 112 || (item.mainProdType == 112 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs18 c-fc-gray">{{item.number}}人参与</p>
            </div>
            <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
          </div>
        </div>
      </div>
    </open-modal>
    <open-modal class="c-pz10000" :openModal='popCircleModal' @closeModal='popCircleModal = false'>
      <div class="c-bg-white c-pv30 c-ph24 c-br-tl20 c-br-tr20">
        <div class="c-fs26 c-fc-sblack c-fw600">圈子</div>
        <div class="c-maxh500 c-minh110 c-mt12 c-contexty-scroll">
          <div v-for="(item, index) in dataInfo.circleList" :key="index">
            <div @click="joinCircle(item.circleId)" class="c-flex-row c-pt20 c-pb20 c-fc-xmlred c-fs26" :class="index != dataInfo.circleList.length - 1 && index < 2 ? 'c-bd-b1' : ''">
              <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-text-hidden c-p">
                <img class="c-maxh c-maxw imgCloseBig c-br8" :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" />
              </div>
              <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-justify-sb">
                <div class="c-fc-xblack c-fs24 c-text-ellipsis2">{{item.name}}</div>
                <div class="c-fs20 c-fc-gray">{{item.memberCount}}人参与</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </open-modal>
    <coupon-list-com
      @closeModal="showCoupon = false"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :prodId="Number(courseId)"
      :prodType="5"
      :dataInfo="dataInfo"
      :chainInfo="chainInfo"
      :isMarketing="isMarketing"
    >
    </coupon-list-com>
    <!-- 显示购买赠送积分 -->
    <point-gift :showPoints.sync="showPoints" :prodId="courseId" :rewardPoints="rewardPoints"></point-gift>
    <!-- 推荐有礼 -->
    <recommend-present ref="recommendPresent"></recommend-present>
    <related-combo :showType="relateShowType" :distributionId="distributionId" @closeCombo="closeCombo" @getMore="getMore" :showCombo="showCombo" :trainingMore="is_page_training" :packageMore="is_page_package" :columnMore="is_page_column"
      :packageList="belongPackageList" :training="training" :columnList="belongColumnList" :circleList="relateCircleList"></related-combo>
    <offical-account v-if="dataInfo && dataInfo.bargain" :showAccountQcode="showAccountQcode" :desc="officalDesc" :imgSrc="$addXossFilter(mpQrcode)" @hideDialog="hideDialog"></offical-account>
    <comfirm-com :pwTip="''" :showPassword="showPassword" :noticeText="noticeText" :text="'请输入密码'" :placeholderText="'请输入密码'" @changePsw="changePsw" @closePassword="showPassword = false" @submitPassword="submitPassword"></comfirm-com>
    <group-purchase-modal ref="gpModal" @groupPurchasePay="groupPurchasePay" @colseModal="colseModal" v-show="showGpModal"></group-purchase-modal>
    <recommend-award v-if="dataInfo.recommend && dataInfo.recommend.isExist" :action="dataInfo.recommend && dataInfo.recommend.action"></recommend-award>
    <gift-modal :hasBuy="dataInfo.hasPermission" :showGiftModal="popGift || popRelatesDatum" :fromCourseId="courseId" :popType="popType" :prodList="popType == 1 ? (dataInfo.giftRelates ? dataInfo.giftRelates : []) : popType == 2 ? (dataInfo.relateDatumArr ? dataInfo.relateDatumArr : []) : []" @closeGift="closeGiftModal"></gift-modal>
    <promote-income v-if="dataInfo && dataInfo.isSaleOut != 0 && (dataInfo.showInvitionCard || dataInfo.showMarketingCard)" :prodId="courseId" :prodType="cfrom.course" :showInvitionCard="dataInfo.showInvitionCard" :showMarketingCard="dataInfo.showMarketingCard" :lower="showSmallTabbar ? 'c-p-t160' : ''" :zClass="'c-pz1000'" @goInvite="inviteFriends" @goMarketingPoster="invitePoster"></promote-income>
    <learn-cer :isReceivedStudy="isReceivedStudy" ref="learnCerCom" :bigType="1"></learn-cer>
    <!-- 入学证书 -->
    <enrol-cer :isReceivedStudy="isReceivedBuy" ref="enrolcerCom" :bigType="2"></enrol-cer>
    <!-- 课程关联的训练营目录 -->
    <camp-directory-dialog v-if="ttId && ttId > 0" ref="campDirectory"></camp-directory-dialog>
    <!-- 关联售卖相关目录 -->
    <open-modal :openModal='showPackageList' @closeModal='showPackageList = false'>
      <package-list-tmp :isTemplate="true" ref="packageList"></package-list-tmp>
    </open-modal>
    <open-modal :needCloseBtn="true" :openModal='showAuthorModal' @closeModal='showAuthorModal = false'>
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-pt36 c-ph24 c-pb24" v-if="dataInfo && dataInfo.lecturers && dataInfo.lecturers.length > 0">
        <div class="c-fs28 c-fc-xblack c-fw600 c-textAlign-c c-pb40">讲师介绍</div>
        <div class="c-maxh500 c-contexty-scroll">
          <div @click="goLecturerDetail(dataInfo.lecturers[0].lecturerId)" class="hh128 c-bg-fa c-br20 c-ph20 c-flex-row c-aligni-center">
            <img class="c-ww88 c-hh88 c-brp50" :src="$addXossFilter(dataInfo.lecturers[0].lecturerAvatar, require('@/assets/defult_head.png'))" alt="">
            <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-hh88 c-ml20">
              <div class="c-fs26 c-fc-xblack c-fw600 c-text-ellipsis1">{{dataInfo.lecturers[0].lecturerName}}</div>
              <div class="c-fs22 c-fc-sblack c-text-ellipsis1">{{dataInfo.lecturers[0].lecturerTitle}}</div>
            </div>
            <div class="c-fc-xblack iconfont c-fs18 c-ml12">&#xe60e;</div>
          </div>
          <div v-if="dataInfo.lecturers[0].desc" class="c-fs24 c-fc-xblack c-lh48 c-mt32 c-ws-pw c-wb-ba">{{dataInfo.lecturers[0].desc}}</div>
          <loading-status-tem :pt20="true" :noData="dataInfo.lecturers[0].desc == '' || dataInfo.lecturers[0].desc == null" :noDataText="'暂无简介'"></loading-status-tem>
        </div>
        <div v-if="dataInfo.lecturers[0].answerId && dataInfo.lecturers[0].ltAnswerStatus == 1 && dataInfo.lecturers[0].isAnswererSelf == 0" @click="goAskQuestion(dataInfo.lecturers[0].answerId)" class="c-fs28 c-fc-white c-hh64 c-br32 theme-bg c-flex-row c-flex-center c-mt32">{{questionCustom == 1 ? '预约' : '提问'}}</div>
      </div>
    </open-modal>
    <open-modal class="c-pz10000" :openModal='popAllRelate' @closeModal='popAllRelate = false'>
      <div class="c-bg-white c-pv30 c-br-tl20 c-br-tr20">
        <div class="c-fs26 c-fc-sblack c-fw600 c-textAlign-c">推荐</div>
        <div class="c-maxh500 c-minh110 c-mt32 c-contexty-scroll" v-if="popAllRelate">
          <active-and-column
            :articleType="2"
            :styleType="2"
            :courseList="relationData.courses"
            :goodsList="relationData.goods"
            :soicalList="relationData.socials"
            :examList="relationData.exams"
            :speechList="relationData.speechs"
            :mutualList="relationData.mutuals"
            :datumList="relationData.datums"
            :eBookList="relationData.ebooks"
            :circleList="relationData.circle"
          >
          </active-and-column>
        </div>
      </div>
    </open-modal>
    <collage-grades ref="collageGrades" :relType="1" :refereeId="refereeId" :isRelForm="dataInfo.isRelForm && !dataInfo.hasFormLog" :extId="extId" :bindPhoneSetting="bindPhoneSetting" :goodsRoomId="goodsRoomId" :recRelateId="recRelateId" :recType="recType" :dataInfo="dataInfo"></collage-grades>
  </div>
</template>

<script>
/* eslint-disable */
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import shareMasker from "@/components/templates/common/shareMasker.vue";
import showIntegrate from "@/components/templates/common/showIntegrate.vue";
import commentCom from "@/components/templates/common/commentCom.vue";
import ActiveAndColumn from "@/components/templates/activeAndColumn.vue";
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import recommendPresent from '@/components/templates/recommendPresent'
import CollagePersonsList from "@/components/templates/collage/collagePersonsList.vue";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import DiscountTip from "@/components/templates/common/discountTip.vue";
import groupGuidance from '@/components/templates/common/groupGuidance.vue'
import relatedCombo from '@/components/templates/relatedCombo'
import couponListCom from "@/components/templates/couponListCom.vue";
import PriceBar from '@/components/templates/common/priceBar.vue';
import bargainRules from '@/components/templates/bargain/bargainRules';
import officalAccount from '@/components/templates/common/officalAccount';
import buyInforswiper from '@/components/templates/buyInforswiper';
import courseDescription from '@/components/templates/courseDescription';
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import MarketingBuyBtn from "@/components/templates/common/marketingBuyBtn.vue";
import CollectBtnCom from "@/components/templates/common/collectBtnCom.vue";
import RecommendAward from "@/components/member/recommend/recommendAward.vue";
import groupPurchaseModal from "@/components/templates/common/groupPurchaseModal.vue";
import courseAdvocate from '@/components/templates/courseAdvocate';
import giftModal from '@/components/templates/giftModal';
import collocationBuyCom from '@/components/templates/collocationBuyCom';
import { goDetails } from "@/utils/goDetails.js"
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import circleLearnNav from '@/components/templates/circle/learnNav.vue';
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
import validTimeCom from "@/components/templates/common/validTimeCom.vue";
import RelateColumnList from "@/components/templates/common/relateColumnList.vue"
import campDirectoryDialog from "@/components/templates/common/campDirectoryDialog.vue";
import { mapState } from "vuex";
import learnCer from "@/components/templates/learnAndachCer/learnCer.vue";
import enrolCer from "@/components/templates/learnAndachCer/enrolCer.vue";
import DiscountInfo from "@/components/templates/common/discountInfo.vue";
import VipEntry from "@/components/templates/common/vipEntry.vue";
import InviteGroup from "@/components/templates/common/inviteGroup.vue";
import PackageListTmp from '@/components/templates/packageListTmp.vue';
import LecturerCom from "@/components/templates/common/lecturerCom.vue";
import formEntry from "@/components/homePage/form/formEntry.vue"
import MoreDevice from "@/components/templates/moreDevice.vue"
import collageGrades from "@/components/templates/collage/collageGrades.vue";
import AppComplain from "@/components/templates/common/appComplain.vue"
import pointGift from "@/components/templates/common/pointGift.vue";
let msgLineHeight = 20;
let gettingCoupon = false;
let playedDuration = 0; //累计观看时长
let startSt = 0;
let endSt = 0;
let previewTimmer = null;
let isClick = false;
let lastScroll = 0;
let watchTimeControl = null;
let watchCount = 0;
let showCountTimmer = null;
let clickChange = false;
const THEME_RGB_MAP = global.THEME_RGB_MAP;
export default {
  name: "ImgText",
  components: {
    formEntry,
    swiper,
    swiperSlide,
    loadingStatusTem,
    shareMasker,
    showIntegrate,
    commentCom,
    ActiveAndColumn,
    PackageIndexCom,
    FlashSalesTimeNew,
    OpenModal,
    MySmallTabbar,
    VipCustomImg,
    recommendPresent,
    CollagePersonsList,
    BottomBuyCom,
    DiscountTip,
    groupGuidance,
    relatedCombo,
    couponListCom,
    PriceBar,
    bargainRules,
    officalAccount,
    buyInforswiper,
    courseDescription,
    ComfirmCom,
    MarketingBuyBtn,
    CollectBtnCom,
    groupPurchaseModal,
    RecommendAward,
    courseAdvocate,
    giftModal,
    circleLearnNav,
    collocationBuyCom,
    PromoteIncome,
    validTimeCom,
    learnCer,
    enrolCer,
    RelateColumnList,
    campDirectoryDialog,
    DiscountInfo,
    VipEntry,
    InviteGroup,
    PackageListTmp,
    LecturerCom,
    MoreDevice,
    collageGrades,
    AppComplain,
    pointGift
  },
  props: [],
  beforeCreate() { },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      prodTypes: global.prodMapType,
      distributionId: '', //分销商城id
      showIntegrate: false,//获取积分提示
      integrateCount: 0,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyId: window.localStorage.getItem("companyId") || '',
      questionCustom: localStorage.getItem("questionCustom"), //定制阿卡西线上学院
      cfrom: global.ckFrom,
      isShowShare: false,
      isShowPresent: false,
      extId: -1, //代表是分类进来的，还是专栏进来的
      ckFrom: global.ckFrom.course,
      is_page: false,
      page: 1,
      limit: 10,
      courseId: "",
      qrImg:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524485854660&di=63d6fb2555a20fddb206cf7bfdf110e9&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01450a577f67fe0000018c1ba664ff.gif",
      isShowPay: false,
      dataInfo: "",
      detailList: [""],
      integralInfo: true,
      relationData: "",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      showPassword: false, //显示密码输入
      noticeText: '',
      tabList: [{
        title: '详情',
        index: 0,
      }],
      typeBar: 0,
      onePage: 1,
      is_onePage: false,
      tabhBarFixed: false,
      showReport: false,//ios app举报
      isiOS: false,
      pathFrom: '',//上级路径
      hasShowMore: false,
      showShareMoneyTip: true,//显示分享赚钱提示
      showAllContent: false,
      showPoints: false,
      rewardPoints: 0,
      accessToken: '', //扫描体验二维码进来的
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      enableBuyedInfoSwiper: JSON.parse(localStorage.getItem("cfg")).enableBuyedInfoSwiper?JSON.parse(localStorage.getItem("cfg")).enableBuyedInfoSwiper:0,
      searchWord: "",
      showColumnList: false,
      showSearchColumn: false,
      columnCourseList: [],
      columnCoursePage: 1,
      columnIsPage: false,
      extColumnId: 0,
      isLoading: false,
      courseCount: 0,
      faStatus: 1, //友情灌溉状态
      discountList: [], //被推荐人奖励优惠券
      equityList: [], //被推荐人奖励会员权益
      familyCardData: [], //被推荐人奖励亲情卡
      integral: 0, //被推荐人奖励积分
      checkText: '',
      commentStatus: 0,
      relatedList: [], //课程搭配学习列表（目前是社群+打卡）
      pointFrom: 14,
      showFormText: false,
      showCombo: false,
      belongPackageList: [],
      belongColumnList: [],
      training: [],
      belongLoading: false,
      is_page_package: false,
      is_page_column: false,
      is_page_training: false,
      pagePackage: 1,
      pageColumn: 2,
      pageTraining: 2,
      isSalesBegin: false, // 判断限时购正在进行
      showAccountQcode: false,
      officalDesc: '关注我们后才可发起砍价哦',
      mpQrcode: '', //二维码图片
      cfg: JSON.parse(localStorage.getItem("cfg")),
      swiperList: [],
      descriptList: [],
      ltAnswerStatus: 0, //答主状态 -2已删除，-1下线,1上线
      ltAnswerId: 0, // 讲师关联的答主id
      isAnswererSelf: '', //0不是答主 1自身是答主
      showMarketingBuyBtn: false,
      hasExpired: false,
      popRelateCourse: false,
      fromColumnId: -1,
      relateShowType: 0,
      bottomBuyDirection: 1,
      timingPutOn: false,
      isOffSale: false,
      showFirstScroll: false,
      moveDirection: 0,  //1点击靠右的tab；2点击靠左的tab
      isCollect: false,
      bindPhoneSetting: null,
      showGpModal: false,
      recType: 0, //推荐类型 1 访问 2 绑定 3 支付
      // 训练营参数
      ttId: '',
      tpId: '',
      tlId: '',
      popGift: false, //赠送礼包
      themeId: '', //来源圈子任务的主题id
      popRelatesDatum: false, //相关资料
      popType: 1,
      circleQuery: {}, //圈子学习计划链接附带参数
      relateCircleList: [], //关联圈子
      relateCollocation: [],
      hasFirstLog: false,
      showStudyCard:false,
      isReceivedStudy:0,
      isReceivedBuy:0,
      nextLessons: '', // 专栏下下一个内容
      prevLessons: '', // 专栏下上一个内容
      columnPermission: false, // 专栏下的权限
      campButtonStatus: {}, // 当前课程是否有上下节
      styleType: JSON.parse(localStorage.getItem("cfg")).viewFormat == 2 ? 2 : 1,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      showPackageList: false, // 展示关联售卖列表弹窗
      showLecturerModal: false,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      chainInfo: '',
      isChainProd: false,
      articleType: 1,
      articleImgs: [],
      typeTextMap: global.prodMapType,
      showAuthorModal: false,
      swiperImgList: [],
      swiperOption: {
      },
      swiperIndex: 0, //轮播图index
      articleTabList: [{
        title: '详情',
        index: 0,
        sortIndex: 1
      }],
      articleTypeBar: 0,
      showSmallTabbar: false,
      showImgCount: true,
      popAllRelate: false,
      optimal: null, // 最低价格返回对象
      popCircleModal: false,
      interactionExamList: [],
      interactionClockInList: [],
      popInteractionType: 1, //1: 正常弹窗 2：考试 3：打卡
      isWeChat: utilJs.isWeiXin(),
      moreDeviceType: 1, //1: 页面中间 2：固定在底部 进入页面在页面中间，向上滚动后固定在底部
    };
  },
  beforeRouteEnter(to, from, next) {
    if (from.query.isWechatH5Pay == 1) {
      to.meta.keepAlive = false;
      let timer = null;
      timer = setTimeout(() => {
        to.meta.keepAlive = true;
        clearTimeout(timer)
      }, 500);
    }
    next(vm => {
      vm.pathFrom = from.path;
    });
  },
  created() {
    utilJs.appShare(this);
    let that = this;
    this.swiperOption = {
      pagination: {
        el: '.swiper-pagination',
        bulletActiveClass: 'theme-bg w24px',
        type: "bullets"
      },
      loop: true,
      speed: 300,
      // autoplay: {
      //   delay: 3000,
      //   disableOnInteraction: false,
      // },
      // autoHeight: true,
      updateOnImagesReady: true,
      observer: true,
      on: {
        click: function (event) {
          that.clickSwiperImg(that.$refs.mySwiper.swiper.realIndex);
        },
        slideChange: function () {
          that.showImgCount = true;
          clearTimeout(showCountTimmer)
          showCountTimmer = setTimeout(() => {
            that.showImgCount = false;
          }, 5000);
          that.swiperIndex = that.$refs.mySwiper.swiper.realIndex;
        }
      },
    };
  },
  mounted() {
  },
  computed: {
    ...mapState({
      hasModalBindPhone: (state) => state.oem_store.hasModalBindPhone
    }),
    showMarketingBar() {
      return this.dataInfo && !this.dataInfo.hasPermission && this.dataInfo.payType != 1 &&
        (
          this.dataInfo.sales ||
          (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) ||
          ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) && this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) ||
          this.dataInfo.isFriendHelper
        )
    },
    // 获取按钮专享价名称
    getBuyBtnTitle() {
      if (this.optimal) {
        const agentName = utilJs.getCustNameMap();
        let btnTxt = '立即购买';
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) : this.dataInfo.price;
        let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
          ? this.dataInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
            ? this.dataInfo.svipDiscount
            : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
              ? this.dataInfo.vipDiscount
              : 100
        let discountPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
        if (this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(discountPrice)) {
          let chainName = this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? '复购' : (this.chainInfo.userType == 1 ? '普通用户' : this.chainInfo.userType2Name[this.chainInfo.userType])
          btnTxt = chainPrice != this.dataInfo.price && chainName ? chainName + '专享价' : '立即购买';
        } else {
          btnTxt = discountPrice * 1 != this.dataInfo.price ? (this.vipType != 1 ? (this.vipType == 2 ? 'VIP专享价' : this.vipType == 4 ? 'SVIP专享价' : agentName[this.vipType] + '专享价') : '立即购买') : '立即购买';
        }
        if (this.dataInfo.sales && this.optimal.optimalPriceType == 101) {
          btnTxt = '立即购买';
        }
        return btnTxt
      }
      return '立即购买'
    },
    // 是否展示标签价格
    isShowPriceBar() {
     return !this.isOffSale && !this.isMarketing && !this.dataInfo.hasPermission && this.dataInfo.isSaleOnly != 0 && !this.dataInfo.sales && !this.dataInfo.collage
    },
    // 判断是否是推荐有礼;
    isRecommend() {
      return this.recType == 3 && this.dataInfo.recommend && this.dataInfo.recommend.isExist
    },
    hasBottomBar() {
      return this.dataInfo && (this.distributionId || (!this.dataInfo.hasPermission || (!this.distributionId && this.dataInfo.isInvitionCard == 1)) || (!this.isiOS && !this.distributionId && !this.dataInfo.collage && (this.dataInfo.payType == 2||this.dataInfo.payType == 3) && this.dataInfo.isSaleOnly == 1) || this.dataInfo.showPresentFriend || this.dataInfo.showMarketingCard || (this.ttId && this.campButtonStatus && this.campButtonStatus.campPermission) || (this.fromColumnId > -1 && this.columnPermission) || this.commentStatus == 1)
    },
    typeTabList() {
      return this.articleTabList.sort((a, b) => {
        return a.sortIndex - b.sortIndex;
      })
    },
    // 判断是否有顶部导航
    unenableTopNav() {
      return this.companyAuth && this.companyAuth.companyTopNav && this.companyAuth.companyTopNav.style && this.companyAuth.companyTopNav.style == 5
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.dataInfo.isSaleOnly != 0 && this.dataInfo.hasPermission == false && this.dataInfo.payType == 2
      return showdiscount
    },
    //大转盘是否显示
    showTurn() {
      let showturn = this.dataInfo.joinActivityInfo
      && this.dataInfo.joinActivityInfo.isJoinActivity == 1
      && !(
        ((this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount == 0) ||
        (this.vipType == 2 && this.dataInfo.vipDiscount == 0) ||
        ((this.vipType == 2 || this.vipType == 4) && this.dataInfo.svipDiscount == 0)
      )
      return showturn;
    },
    hasGiftRelates() {
      let hasGiftRelatesTmp = this.dataInfo.giftRelates && this.dataInfo.giftRelates.length > 0;
      return hasGiftRelatesTmp;
    },
    //是否是营销活动
    isMarketing() {
      let isMarketing = this.dataInfo &&
        (this.dataInfo.sales || (this.dataInfo.bargain
          && ((this.dataInfo.bargain.status == 1 &&
            this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) ||
          ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) &&
            this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) || this.dataInfo.isFriendHelper)
      return isMarketing
    },
    //不显示优惠券
    isFavourable() {
      let isFavourable = this.dataInfo &&
        ((this.dataInfo.bargain
          && ((this.dataInfo.bargain.status == 1 &&
            this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) || this.dataInfo.isFriendHelper)
      return isFavourable
    },
    //营销原价计算价格
    calculationPrice() {
      let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
        ? this.dataInfo.commonProdInfo.agentDiscount
        : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
          ? this.dataInfo.svipDiscount
          : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
            ? this.dataInfo.vipDiscount
            : 100;
      let calculationPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
      if (this.optimal) {
        // 链动价格
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) : this.dataInfo.price;
        // 当链动价格存在且链动价格跟常规身份价格对比时，如果链动小于或者等于身份价格取链动价格
        calculationPrice = this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(calculationPrice) ? chainPrice : calculationPrice;
        if (this.dataInfo.isFriendHelper) {
          calculationPrice = Number(this.optimal.optimalPrice).toFixed(2);
        }
      }
      return calculationPrice;
    },
    // 是否显示评论
    showCommentBtnComputed() {
      // enableComment 1: 详情开启评论，0：隐藏评论，2：使用全局设置判断是否开启评论
      let isShowComment = false;
      if (this.dataInfo.enableComment == 1 && this.dataInfo.hasPermission && !this.distributionId) {
        isShowComment = true;
      } else if (this.dataInfo.enableComment == 0) {
        isShowComment = false;
      } else if (this.dataInfo.enableComment == 2) {
        // dataInfo.hasPermission && cfg && cfg.enableComment == 1 && !distributionId
        if (this.cfg && this.cfg.enableComment == 1 && this.dataInfo.hasPermission && !this.distributionId) {
          if (this.cfg && this.cfg.enableArticleComment == 1) {
            isShowComment = true;
          } else {
            isShowComment = false;
          }
        } else {
          isShowComment = false;
        }
      }
      return isShowComment;
    },
    isUserGroup() { // true: 指定用户购买或者观看，但是该用户不属于指定用户  false：非指定用户购买或者观看，或者该用户属于指定用户
      let isUserGroup = ((!this.dataInfo.hasPermission) || (this.dataInfo.hasPermission && (this.dataInfo.permissionType == 1 || this.dataInfo.permissionType == 2 || this.dataInfo.permissionType == 3 || this.dataInfo.permissionType == 18 || this.dataInfo.permissionType == 19))) && (this.dataInfo.isUserGroup == 1 && this.dataInfo.isInUserGroup != 1);
      return isUserGroup;
    },
    // isDepartments： 是否开启指定组织，1是0否   isUserInDepartment：当前用户是否在指定组织中，1是0否
    isStoreUserGroup(){ // true: 门店指定组织购买或者观看，但是该用户不在指定组织   false: 没有开启指定组织 或者该用户属于指定组织
      let flag = this.$isStore() && ((!this.dataInfo.hasPermission) || (this.dataInfo.hasPermission && (this.dataInfo.permissionType == 1 || this.dataInfo.permissionType == 2 || this.dataInfo.permissionType == 3 || this.dataInfo.permissionType == 18 || this.dataInfo.permissionType == 19))) && (this.dataInfo.isDepartments == 1 && this.dataInfo.isUserInDepartment != 1);
      return flag;
    },
    showInteractionPart() {
      return !this.$isStore() && (this.showTurn || (this.interactionClockInList && this.interactionClockInList.length > 0) || (this.dataInfo.circleList && this.dataInfo.circleList.length > 0) || (this.interactionExamList && this.interactionExamList.length > 0));
    },
    showInviteGroup() { //是否展示引导入群入口 dataInfo.guideData.showPosition 1:获得权限前展示 2:获得权限后展示 3:始终展示
      let showPosition = this.dataInfo && this.dataInfo.guideData && (this.dataInfo.guideData.showPosition == 3 || (this.dataInfo.guideData.showPosition == 1 && (!this.dataInfo.hasPermission || (this.dataInfo.payType == 1 && this.dataInfo.isSaleOnly != 0))) || (this.dataInfo.guideData.showPosition == 2 && this.dataInfo.hasPermission))
      let inviteGroup = this.dataInfo && this.dataInfo.guideData && showPosition && this.dataInfo.guideData.isOpenGuide == 1 && this.dataInfo.guideData.guideType.includes(1);
      return inviteGroup
    }
  },
  watch: {
    $route(to, from) {
      // 新增课程可以关联课程后，可能会从出现从音频详情页跳入音频详情页的情况，无法进入activate
      if (to.path == '/homePage/course/imgText' && from.path == '/homePage/course/imgText') {
        clearTimeout(previewTimmer);
        clearTimeout(watchTimeControl);
        if (this.dataInfo.hasPermission && startSt > 0 && !this.bindPhoneSetting.getBind) {
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          this.setProgress(playedDuration);
          if (playedDuration > 2) {
            this.shareGetIntegration(62, playedDuration);
          }
          startSt = 0;
          endSt = 0;
          playedDuration = 0;
        }
        this.initData();
      }
    },
    hasModalBindPhone() {
      if (this.dataInfo.hasPermission && this.hasModalBindPhone) {
        this.updateLearnTime();
      }
    },
  },
  methods: {
    getCommentCount(count = 0) {
      if (count && count > 0) {
        const index = this.tabList.findIndex(i => i.title == '评论')
        index > -1 && this.$set(this.tabList[index], "smallNum", count);
      }
    },
    addComment() {
      if (!((this.articleType == 2 || this.articleType == 3) && this.dataInfo.hasPermission)) {
        const item = this.tabList.find(i => i.title == '评论') || {}
        this.typeBar = item.index || 0
      }
      this.$nextTick(() => {
        if (this.$refs.commentCom) {
          this.$refs.commentCom.public_addComment()
        }
      })
    },
    articleChangeType: function (type, changeDir) {
      if (this.articleTypeBar != type) {
        let bWidth = document.getElementById('app').clientWidth;
        let recommendPartTop = document.querySelector('#recommendPart') ? document.querySelector('#recommendPart').offsetTop - 3.6 * (bWidth / 16) : 0;
        let giftPartTop = document.querySelector('#giftPart') ? document.querySelector('#giftPart').offsetTop - 3.6 * (bWidth / 16) : 0;
        let datumPartTop = document.querySelector('#datumPart') ? document.querySelector('#datumPart').offsetTop - 3.6 * (bWidth / 16) : 0;
        let commentPartTop = document.querySelector('#commentPart') ? document.querySelector('#commentPart').offsetTop - 3.6 * (bWidth / 16) : 0;
        let seriesPartTop = document.querySelector('#seriesPart') ? document.querySelector('#seriesPart').offsetTop - 3.6 * (bWidth / 16) : 0;
        let relatedPartTop = document.querySelector('#relatedPart') ? document.querySelector('#relatedPart').offsetTop - 3.6 * (bWidth / 16) : 0;
        let circlePartTop = document.querySelector('#circlePart') ? document.querySelector('#circlePart').offsetTop - 3.6 * (bWidth / 16) : 0;
        if (type == 0) {
          window.scrollTo(0, 0)
        }
        if (type == 1) {
          window.scrollTo(0, recommendPartTop + 5)
        }
        if (type == 2) {
          window.scrollTo(0, giftPartTop + 5)
        }
        if (type == 3) {
          window.scrollTo(0, commentPartTop + 5)
        }
        if (type == 4) {
          window.scrollTo(0, seriesPartTop + 5)
        }
        if (type == 5) {
          window.scrollTo(0, datumPartTop + 5)
        }
        if (type == 6) {
          window.scrollTo(0, relatedPartTop + 5)
        }
        if (type == 7) {
          window.scrollTo(0, circlePartTop + 5)
        }
        this.articleTypeBar = type;
        clickChange = true;
        setTimeout(() => {
          clickChange = false;
        }, 20)
      }
      return false;
    },
    clickBtn(bItem) {
      if (bItem.prodType != 12) {
        this.clickGoDetail(bItem);
      } else if (bItem.prodType == 12 && (bItem.stock <= 0 || bItem.goodsStatus == -1 || bItem.goodsStatus == -2)) {
        // 商品无库存或者下架、删除
        this.$routerGo(this, "push", {
          path: '/mall/shopDetail/shopDetail',
          query: {
            shopNo: bItem.prodId
          }
        })
      } else if (bItem.prodType == 12 && (bItem.status == 1 || (bItem.goId && bItem.orderStatus != -2 && bItem.orderStatus != -3 && bItem.orderStatus != -4 && bItem.orderStatus != -5))) {
        //orderStatus: 0 未支付  1已支付 2发货3 收货 4完成  5已退款  6退款失败  -1失效订单(支付失败，包括超库存退款) -2取消订单 -3已关闭订单 -4删除订单 -5商家取消订单'
        //status: 0 未兑换 1 已兑换
        this.goShopOrderDetail(bItem.goId, bItem.orderNo);
      } else if (bItem.prodType == 12 && bItem.status == 0) {
        this.getShopInfo(bItem.prodId, bItem.grId);
      }
    },
    goShopOrderDetail(goId, orderNo) {
      this.$routerGo(this, "push", {
        path: '/mall/mallOrder/orderDetail',
        query: {
          goId: goId,
          type: -1,
          orderNo: orderNo
        }
      })
    },
    getShopInfo(prodId, grId) {
      utilJs.getMethod(
        global.apiurl + "goods/goodsDetail?mgId=" + prodId + "&grId=" + grId,
        res => {
          this.shopInfo = res.goods;
          this.freeShipping = res.freeShipping;
          this.payAwardData = res.payAwardData;
          let shopInfo = [
            {
              mgId: this.shopInfo.mgId,
              mcId: "",
              avatar: this.shopInfo.avatar ? this.shopInfo.avatar : "",
              pointsDeduct: 0,
              name: this.shopInfo.name,
              price: 0,
              originalPrice: this.shopInfo.originalPrice,
              quantity: 1,
              shopSpecInfo: "",
              gsiiId: "",
              postage: this.shopInfo.postage,
              isMail: this.shopInfo.isMail,
              isMallExpressDeliver: this.shopInfo.isMallExpressDeliver,
              isMallOfflineDeliver: this.shopInfo.isMallOfflineDeliver,
              stock: 1,
              salesStock: "",
              collageStock: "",
              freeShipping: this.freeShipping,
              isFlashSales: false,
              isCollage: false,
              pId: "",
              noLimit: false,
              vipDiscount: this.shopInfo.vipDiscount,
              svipDiscount: this.shopInfo.svipDiscount,
              agentDiscount: this.shopInfo.agentDiscount,
              partnerDiscount: this.shopInfo.partnerDiscount,
              branchDiscount: this.shopInfo.branchDiscount,
              isGiftRelate: true,
              limitType: -1,
              limitNumber: 0,
              purchasedNum: 0,
              vipDiscountType: this.shopInfo.vipDiscountType || 1,
            }
          ];
          sessionStorage.setItem("shopBuyInfo", JSON.stringify(shopInfo));
          let goPath = "/mall/shopSettlement/shopSettlement?shopNo=" + prodId + "&grId=" + grId;
          this.$routerGo(this, "push", {
            path: goPath
          });
        }
      );
    },
    clickGoDetail(cItem) {
      let prodType = 0;
      let courseType = 0;
        prodType = cItem.prodType == 110 || cItem.prodType == 111 || cItem.prodType == 112
        ? this.cfrom.course
        : cItem.prodType;
        courseType = cItem.prodType == 112
        ? 2
          : cItem.prodType == 111
            ? 1
              : 0;
      goDetails(this, prodType, cItem.prodId || cItem.id, {}, courseType);
    },
    goLecturerDetail(lecturerId) {
      this.$routerGo(this, "push", {
        path: "/homePage/course/lecturerDetail",
        query: {
          lecturerId: lecturerId,
          courseId: this.courseId
        }
      })
    },
    showLecturersDetail() {
      this.showAuthorModal = true;
    },
    //点击轮播图
    clickSwiperImg(index) {
      let arr = [];
      this.swiperImgList.forEach(item => {
        arr.push(item.imgUrl)
      })
      this.clickPreviewImage(index, this.swiperImgList[index].imgUrl, arr);
    },
    // 点击图片放大预览
    clickPreviewImage(index, imgUrl, imgs) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgs) {
        imgArr.push(key);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    clickLecturer() {
      this.showLecturerModal = true;
    },
    popPresentCourse() {
      if (this.$refs.bottomBuy) {
        this.$refs.bottomBuy.isShowPresent = true;
      }
    },
    clickGoAllPackage(data) {
      this.showPackageList = true;
      this.$refs.packageList.initModalData(data);
    },
    // 初始化训练营底部目录栏数据
    campDirectoryInitData(isGoNext = 0) {
      this.$nextTick(() => {
        if (this.isLoading) {
          return;
        }
        this.isLoading = true;
        if (!!this.ttId && this.$refs.campDirectory) {
          this.$refs.campDirectory.initData({
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId
          }).then((data) => {
            this.isLoading = false;
            this.campButtonStatus = data
            if (isGoNext && this.$refs.campDirectory) {
              this.$refs.campDirectory.handleCampDirectory(1)
            }
          }).catch(() => {
            this.isLoading = false;
            if (isGoNext && this.$refs.campDirectory) {
              this.$refs.campDirectory.handleCampDirectory(1)
            }
          })
        }
      })
    },
    handleCampDirectory(type) { // type  0查看目录弹窗  -1上一节  1下一节
      // 图文课程除了 进度为0提交进度 时会触发更新campDirectoryInitData，后续就是用户主动点击下一任务才会触发
      const { modeType, dateLockType } = this.campButtonStatus
      if (type == 1 && this.campButtonStatus && this.campButtonStatus.campPermission && (modeType == 3 || modeType == 4 || (modeType == 1 && dateLockType==2)) && !this.campButtonStatus.isNextUnlock) {
        this.campDirectoryInitData(1)
        return
      }
      if (this.$refs.campDirectory) {
        this.$refs.campDirectory.handleCampDirectory(type)
      }
    },
    goNextCampLesson(timeout = 1000) {
      const { modeType, dateLockType } = this.campButtonStatus
      if (this.campButtonStatus && this.campButtonStatus.campPermission && (modeType == 3 || modeType == 4 || (modeType == 1 && dateLockType==2)) && !this.campButtonStatus.isNextUnlock) {
        // 闯关模式和定期考试需要逐个解锁，所以请求图文详情后需要先重新获取状态
        let timer = null
        timer = setTimeout(() => { // 需要延迟一会儿，进度没有同步那么快
          this.campDirectoryInitData()
          clearTimeout(timer);
        }, timeout);
      }
    },
    goBindMobile() {
      utilJs.goBindMobile()
    },
    getProdRelateCollocation() {
      utilJs.getMethod(`${global.apiurl}prodsCollocation/getProdRelateCollocation?prodType=5&prodId=${this.courseId}`,
        res => {
          this.relateCollocation = res.data ? res.data.slice(0,3) : [];
        }
      );
    },
    joinCircle(id) {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {id: id ? id : this.dataInfo.circleList[0].circleId}
      });
    },
    cancleCollectPop() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) {
        if (utilJs.goBindMobile()) return;
      }
      let postData = {
        prodType: this.cfrom.course,
        prodId: this.courseId,
      }
      utilJs.postMethod(`${global.apiurl}prodCollect/cancelCollect`, postData, (res) => {
        this.$showCjToast({
          text: "收藏已取消",
          type: 'text',
        });
        this.cancelCollect();
      });
    },
    doCollectPop() {
      if ((this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) || (this.bindPhoneSetting && this.bindPhoneSetting.collectBind)) {
        if (utilJs.goBindMobile()) return;
      }
      let postData = {
        prodType: this.cfrom.course,
        prodId: this.courseId,
        subProdType: 2
      }
      utilJs.postMethod(`${global.apiurl}prodCollect/addToCollect`, postData, (res) => {
        this.$showCjToast({
          text: "课程已收藏",
          type: 'text',
        });
        this.doCollect();
      });
    },
    doCollect() {
      this.isCollect = true;
    },
    cancelCollect() {
      this.isCollect = false;
    },
    handleClickPlaint() {
      this.$store.commit('updateShowComplaint', true);
    },
    putOn() {
      this.dataInfo.status = 1;
      this.timingPutOn = false;
    },
    closeFirstScroll() {
      this.showFirstScroll = false;
    },
    popRelate() {
      this.popRelateCourse = true;
    },
    popGiftModal() {
      this.popType = 1;
      this.popGift = true;
    },
    popRelatesDatumModal() {
      this.popType = 2;
      this.popRelatesDatum = true;
    },
    closeGiftModal() {
      if (this.popGift) {
        this.popGift = false;
      } else if (this.popRelatesDatum) {
        this.popRelatesDatum = false;
      }
    },
    popMarketingBuy() {
      this.showMarketingBuyBtn = true;
    },
    goToTop() {
      window.scrollTo(0, 0);
    },
    changePsw() {
      this.noticeText = "";
    },
    //提交密码
    submitPassword(inputPwd) {
      if (!inputPwd.trim()) {
        this.noticeText = "*密码错误";
        return;
      }
      if (isClick) {
        return;
      }
      isClick = true;
      utilJs.postMethod(global.apiurl + "common/verifyEncrypt", {
        encrypt: inputPwd,
        prodType: global.ckFrom.course,
        id: this.courseId
      }, res => {
        isClick = false;
        if (res.code == 500) {
          this.noticeText = "*密码错误";
        } else if (res.code == 200) {
          this.showPassword = false;
          // 专栏课程输入密码后刷新页面数据
          if (Number(this.fromColumnId) != -1) {
            let newUrl = `/homePage/course/imgText?courseId=${this.courseId}&ckFrom=${this.ckFrom}`;
            this.$routerGo(this, "replace", {path: newUrl});
            return
          }
          this.initData()
        }
      },
        failRes => {
          isClick = false;
        }
      );
    },
    inputPsw() {
      let ckFrom = this.ckFrom == this.cfrom.collageCourse ? this.cfrom.course : (this.ckFrom == this.cfrom.collageColumn ? this.cfrom.column : this.ckFrom);
      let extId = this.ckFrom == this.cfrom.collageCourse ? -1 : this.extId;
      if (this.bindPhoneSetting && this.bindPhoneSetting.passwordBind && utilJs.goBindMobile()) {
        return;
      }
      ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? this.cfrom.course : ckFrom);
      extId = this.isShowPresent == true ? -1 : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? -1 : extId);
      // 有关联表单，则跳到报名表单处
      if (this.dataInfo.collectPage != 3 &&this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
        this.goForm(this.isShowPresent, '');//type 1表示关联产品
      } else {
        this.noticeText = "";
        this.showPassword = true;
      }
    },
    //购买信息
    buyedInfoSwiper() {
      let that = this
      utilJs.getMethod(`${global.apiurl}common/buyedInfoSwiper?prodId=${that.courseId}&prodType=${global.ckFrom.course}`, function (res) {
        that.swiperList = res
      }, failRes => {
      });
    },
    hideDialog() {
      this.showAccountQcode = false;
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(`${global.apiurl}bargains/getMpData?bargainId=${_this.dataInfo.bargain.bargainId}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    // 砍价跳转
    handleClickBargainDetail(bargainId) {
      if (this.dataInfo.bargain.status == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能砍价！',
          type: 'text'
        });
        return;
      }
      this.checkUserIsFollowedMp().then(res => {
        if (res.threshold == 2 && res.isFollowedMp == 0) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return;
        }
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
          return;
        }
        if (this.dataInfo.collectPage==1&&this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
          this.goForm(this.isShowPresent, bargainId);
        } else {
          if (this.dataInfo.bargain.status == 2) {
            this.$routerGo(this, "push", {
              path: "/homePage/bargain/bargainDetail",
              query: {
                bargainId: bargainId
              }
            });
          }
        }
      })
    },
    getBelong(tabType) {
      if (!this.belongLoading) {
        this.belongLoading = true;
        let $this = this;
        if (tabType == 1) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          if (this.distributionId) {
            getUrl = `${global.apiurl}distributionMarkets/showAll?`;
          }
          utilJs.getMethod(getUrl + 'proType=1&proId=' + this.courseId + '&page=' + this.pagePackage + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.belongPackageList = res.list.combos.data ? $this.belongPackageList.concat(res.list.combos.data) : [];
            if ($this.pagePackage == 1) { //从课程刚进来页面的时候需要获取专栏列表，第二页开始不需要了
              $this.belongColumnList = res.list.columns.data;
              $this.training = res.list.training.data ? res.list.training.data : [];
              $this.relateCircleList= res.list.circles;
              // $this.pageColumn = res.list.columns.data && res.list.columns.data.length >= 10 ? ($this.pageColumn + 1) : $this.pageColumn;
              $this.is_page_column = res.list.columns.data && res.list.columns.data.length >= 10 ? true : false;
              $this.is_page_training = res.list.training.data && res.list.training.data.length >= 10 ? true : false;
            }
            $this.pagePackage = res.list.combos.data && res.list.combos.data.length >= 10 ? ($this.pagePackage + 1) : $this.pagePackage;
            $this.is_page_package = res.list.combos.data && res.list.combos.data.length >= 10 ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        } else if (tabType == 2) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          if (this.distributionId) {
            getUrl = `${global.apiurl}distributionMarkets/showAll?`;
          }
          utilJs.getMethod(getUrl + 'proType=1&proId=' + this.courseId + '&page=' + this.pageColumn + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.belongColumnList = $this.belongColumnList.concat(res.list.columns.data);
            $this.pageColumn = res.list.columns.data && res.list.columns.data.length >= 10 ? ($this.pageColumn + 1) : $this.pageColumn;
            $this.relateCircleList= res.list.circles;
            $this.is_page_column = res.list.columns.data && res.list.columns.data.length >= 10 ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        } else if (tabType == 3) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          if (this.distributionId) {
            getUrl = `${global.apiurl}distributionMarkets/showAll?`;
          }
          utilJs.getMethod(getUrl + 'proType=1&proId=' + this.courseId + '&page=' + this.pageTraining + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.training = res.list.training.data ? $this.training.concat(res.list.training.data) : [];
            $this.relateCircleList= res.list.circles;
            $this.pageTraining = res.list.training.data && res.list.training.data.length >= 10 ? ($this.pageTraining + 1) : $this.pageTraining;
            $this.is_page_training = res.list.training.data && res.list.training.data.length >= 10 ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        }
      }
    },
    getMore(tType) {
      this.getBelong(tType)
    },
    handleShowGuidePop() {
      // 显示入群引导
      this.$refs.guidance.isShowPop();
    },
    // 获取搭配学习列表
    getRelatedList() {
      utilJs.getMethod(`${global.apiurl}matchRelate/getMainList?prodType=112&prodId=${this.courseId}`, (res) => {
        this.relatedList = [...this.relatedList, ...res.matchList];
        if (!this.$isStore() && ((this.relatedList && this.relatedList.length > 0) || (this.dataInfo && this.dataInfo.circleList && this.dataInfo.circleList.length > 0)) && this.dataInfo.hasPermission) {
          this.tabList.splice(1, 0, {
            title: '互动',
            index: 3,
          })
        }
        if (!this.$isStore() && this.dataInfo.hasPermission && (this.articleType == 2 || this.articleType == 3) && (this.showTurn || (this.relatedList && this.relatedList.length > 0) || (this.dataInfo.circleList && this.dataInfo.circleList.length > 0))) {
          this.articleTabList.push({
            title: '互动',
            index: 6,
            sortIndex: 3
          })
        }
        this.interactionExamList = this.relatedList.filter((item) => {
          return item.mainProdType == 125;
        });
        this.interactionClockInList = this.relatedList.filter((item) => {
          return item.mainProdType == 112;
        });
      });
    },
    popInteractionExamList() {
      this.popInteractionType = 2;
      this.popRelateCourse = true;
    },
    popInteractionClockInList() {
      this.popInteractionType = 3;
      this.popRelateCourse = true;
    },
    //点击搭配学习
    goRevlantDetail(type, id, item) {
      let toPath = '';
      // 10社群 41打卡
      if (type == 10) {
        toPath = `/homePage/socialGroup/socialGroupInfo?SocialRoomId=${id}`;
      } else if (type == 112) {
        if(item.hasPermission){
          switch (item.type) {
            case 1:
              //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
              let startTimeTamp = new Date(`${item.startTime} ${item.startHour}`.replace(/-/g, "/")).getTime();
              let endTimeTamp = new Date(`${item.endTime} ${item.endHour}`.replace(/-/g, "/")).getTime();
              let nowTimeTamp = new Date().getTime();
              let curTime = utilJs.dateFormat(nowTimeTamp);
              if (nowTimeTamp < startTimeTamp || nowTimeTamp > endTimeTamp) {
                curTime = item.startTime;
              }
              toPath=`/homePage/clockIn/stuHomeWork?workType=1&clockInId=${id}&curDate=${curTime}`
              break;
            case 2:
              //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
              toPath= `/homePage/clockIn/stuHomeWork?workType=2&clockInId=${id}&curId=${item.hwId}`;
              break;
            case 3:
              //闯关打卡
                toPath= `/homePage/clockIn/stuHomeWork?workType=3&clockInId=${id}&curId=${item.hwId}&isFirstJoin=${item.isFirstJoin}`
                break;
          }
        }else{
          toPath = `/homePage/clockIn/clockInDetail?clockInId=${id}`;
        }
      } else if (type == 125) {
        toPath= `/homePage/testPaper/testDetail?testId=${id}&origin=${global.ckFrom.course}&prodId=${this.courseId}`
      }  
      this.$routerGo(this, "push", { path: toPath });
    },
    clickDesc(e) {
      let imgNodeList = document.querySelectorAll('#descParent1 img');
      let imgArr = [];
      for (let item of imgNodeList) {
        item.src && imgArr.push(item.src)
      }
      previewTimmer = setTimeout(() => {
        if (e.target.tagName == 'IMG' && e.target.src) {
          wxUtilJs.previewImage({
            current: e.target.src, // 当前显示图片的http链接
            urls: imgArr // 需要预览的图片http链接列表
          });
        }
      }, 200)
    },
    //活动海报
    invitePoster: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.course;//this.ckFrom;
      let type = this.dataInfo.collage ? 3 : this.dataInfo.sales ? 2 : this.dataInfo.bargain ? 5 : 4;
      let cId = this.dataInfo.isFriendHelper ? this.dataInfo.faId : this.dataInfo.collage ? this.dataInfo.collage.collageId : this.dataInfo.bargain ? this.dataInfo.bargain.bargainId : this.dataInfo.sales.pId;
      let extId = 2; //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址
      let proId = this.courseId;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: type, ckFrom: ckFrom, extId: extId, proId: proId } });
    },
    goVipBuy(cmpId, type) {
      this.$routerGo(this, "push", {
        path: "/member/vip/vipUp",
        query: { 'prodId': cmpId, 'type': type }
      });
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    hideColumnList() {
      this.showColumnList = false;
    },
    popColumnList() {
      this.showColumnList = true;
      this.isInitData = true;
      // 来源是专栏且没有课程权限
      if (this.dataInfo && !this.dataInfo.hasPermission && this.extId) {
        return
      }
    },
    getMoreCourse() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let postUrl = `${global.apiurl}column/getCourses/${this.extColumnId}?page=${this.columnCoursePage}&limit=${this.limit}&sort=${this.cfg.enableColumnOrderType == 2 ? 'desc' : 'asc'}&name=${this.searchWord}&isCoursePage=1`;
      if (this.distributionId) {
        postUrl = `${global.apiurl}distributionMarkets/${this.extColumnId}/subs?page=${this.columnCoursePage}&limit=${this.limit}&sort=${this.cfg.enableColumnOrderType == 2 ? 'desc' : 'asc'}&isCoursePage=1`;
      }
      utilJs.getMethod(postUrl, (res) => {
        this.isLoading = false;
        if (this.columnCoursePage == 1) {
          this.courseCount = res.total;
          this.columnCourseList = res.data;
        } else {
          let list = res.data;
          this.columnCourseList = this.columnCourseList.concat(list);
        }
        this.columnCoursePage = res.data && (res.data.length >= 10) ? this.columnCoursePage + 1 : this.columnCoursePage;
        this.columnIsPage = res.data && (res.data.length >= 10) ? true : false;
      }, failRes => {
        this.isLoading = false;
      });
    },
    clickSearch() {
      this.columnCourseList = [];
      this.columnCoursePage = 1;
      this.columnIsPage = false;
      this.getMoreCourse();
    },
    // 限时购倒计时
    falshSalesTime(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        this.dataInfo.bargain.status = status
      }
    },
    // 限时购倒计时结束
    finishFlashSales(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status;
        if (status == 2) {
          this.ckFrom = this.dataInfo.columnId == 0 ? global.ckFrom.flashSalesCourse : global.ckFrom.flashSalesColumn;
        }
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        // this.dataInfo.bargain.status = status
        this.getImgTextDetail();
      }
      // 活动已结束，清空所有营销活动信息及状态
      if (status == -1) {
        this.dataInfo.sales = null;
        this.dataInfo.collage = null;
        this.dataInfo.isFriendHelper = false;
        this.ckFrom = this.dataInfo.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
      }
    },
    //回退到上级(知识套餐独有),不支持单独售卖
    backPackage: function (showType=0) {
      this.relateShowType = showType;
      this.showCombo = true;
    },
    closeCombo: function () {
      this.showCombo = false;
    },

    //跳转到助力详情
    goHelpDetail: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return;
      }
      if (this.faStatus == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能助力领取！',
          type: 'text'
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/task/task",
          query: { 'faId': this.dataInfo.faId, 'refereeId': localStorage.getItem("userId") }
        });
      }
    },
    moreDeviceScroll() {
      let bWidth = document.getElementById('app').clientWidth;
      let moreDeviceHeight = (bWidth / 16) * 2;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let deviceOffsetTop =
      document.querySelector("#moreDevice").offsetTop != null
          ? document.querySelector("#moreDevice").offsetTop
          : 0;
      let infoOffsetTop =
      document.querySelector("#courseInfo") && document.querySelector("#courseInfo").offsetTop != null
          ? document.querySelector("#courseInfo").offsetTop
          : 0;
      if (deviceOffsetTop > 0) {
        if (scrollTop >= (infoOffsetTop + deviceOffsetTop + moreDeviceHeight)) {
          this.moreDeviceType = 2;
        } else {
          this.moreDeviceType = 1;
        }
      }
    },
    //typeBar样式置顶
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      
      let bWidth = document.getElementById('app').clientWidth;
      let topDetailOffsetTop = document.querySelector('#topDetail') ? document.querySelector('#topDetail').offsetTop - 3.6 * (bWidth / 16) : 0;
      let recommendPartOffsetTop = document.querySelector('#recommendPart') ? document.querySelector('#recommendPart').offsetTop - 3.6 * (bWidth / 16) : 0;
      let giftPartOffsetTop = document.querySelector('#giftPart') ? document.querySelector('#giftPart').offsetTop - 3.6 * (bWidth / 16) : 0;
      let datumPartOffsetTop = document.querySelector('#datumPart') ? document.querySelector('#datumPart').offsetTop - 3.6 * (bWidth / 16) : 0;
      let commentPartOffsetTop = document.querySelector('#commentPart') ? document.querySelector('#commentPart').offsetTop - 3.6 * (bWidth / 16) : 0;
      let seriesPartOffsetTop = document.querySelector('#seriesPart') ? document.querySelector('#seriesPart').offsetTop - 3.6 * (bWidth / 16) : 0;
      let relatedPartOffsetTop = document.querySelector('#relatedPart') ? document.querySelector('#relatedPart').offsetTop - 3.6 * (bWidth / 16) : 0;
      let circlePartOffsetTop = document.querySelector('#circlePart') ? document.querySelector('#circlePart').offsetTop - 3.6 * (bWidth / 16) : 0;
      if (!clickChange) {
        if (document.querySelector('#commentPart') && scrollTop > commentPartOffsetTop) {
          this.articleTypeBar = 3;
        } else if (document.querySelector('#giftPart') && scrollTop > giftPartOffsetTop) {
          this.articleTypeBar = 2;
        } else if (document.querySelector('#recommendPart') && scrollTop > recommendPartOffsetTop) {
          this.articleTypeBar = 1;
        } else if (document.querySelector('#seriesPart') && scrollTop > seriesPartOffsetTop) {
          this.articleTypeBar = 4;
        } else if (document.querySelector('#circlePart') && scrollTop > circlePartOffsetTop) {
          this.articleTypeBar = 7;
        } else if (document.querySelector('#relatedPart') && scrollTop > relatedPartOffsetTop) {
          this.articleTypeBar = 6;
        } else if (document.querySelector('#datumPart') && scrollTop > datumPartOffsetTop) {
          this.articleTypeBar = 5;
        } else if (document.querySelector('#topDetail') &&  scrollTop > topDetailOffsetTop) {
          this.articleTypeBar = 0;
        }
      }

      if (this.articleType == 3 && this.dataInfo.hasPermission && document.querySelector('#topDetail')) {
        if (scrollTop > topDetailOffsetTop) {
          this.showSmallTabbar = true;
        } else {
          this.showSmallTabbar = false;
        }
      }
      if (this.articleType == 2 && this.dataInfo.hasPermission) {
        if (scrollTop > 0) {
          this.showSmallTabbar = true;
        } else {
          this.showSmallTabbar = false;
        }
      }
      // 退出图文详情时会报错
      if (!document.querySelector('#tabhBar')) {
        return;
      }
      var offsetTop = document.querySelector('#tabhBar').offsetTop != null ? document.querySelector('#tabhBar').offsetTop : 68;
      if (scrollTop >= offsetTop && offsetTop > 0) {
        this.tabhBarFixed = true;
      } else {
        this.tabhBarFixed = false;
      }
      if (scrollTop > lastScroll + 10) { //向下
        lastScroll = scrollTop;
        this.bottomBuyDirection = 2;
      }
      if (scrollTop < lastScroll) { // 向上
        lastScroll = scrollTop;
        this.bottomBuyDirection = 3;
      }
      // if (document.querySelector("#moreDevice")) {
      //   this.moreDeviceScroll();
      // }
    },
    gcd: function (cinfo) {
      this.goCollageDetail(cinfo.groupId, cinfo.collageId);
    },
    //拼团详情
    goCollageDetail: function (groupId, collageId) {
      if (this.isStoreUserGroup) {
        this.$showCjToast({
          text: '指定组织成员可以购买',
          type: 'text'
        });
        return;
      }
      if (this.isUserGroup) {
        this.$showCjToast({
          text: '指定用户可以购买',
          type: 'text'
        });
        return;
      }
      if (this.dataInfo.collage.userType != -1 && this.dataInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'text'
        });
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'text'
          });
        } else {
          let hfs = this.dataInfo.isRelForm && !this.dataInfo.hasFormLog;
          let pathQuery = {
            'groupId': groupId,
            'collageId': collageId,
            isRelForm: hfs,
            extId: this.extId,
            relType: 4,
            courseId: this.courseId,
            recRelateId: this.recRelateId,
            recType: this.recType
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/homePage/collage/collageDetail",
            query: pathQuery
          });
        }
      }
    },
    goBuy: function () {
      if (this.isStoreUserGroup) {
        this.$showCjToast({
          text: '指定组织成员可以购买',
          type: 'text'
        });
        return;
      }
      if (this.isUserGroup) {
        this.$showCjToast({
          text: '指定用户可以购买',
          type: 'text'
        });
        return;
      }
      if (this.dataInfo.collage.userType != -1 && this.dataInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'text'
        });
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'text'
          });
        } else {
          //要加判断是否选择阶梯
          if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 1 ) {
            this.dataInfo.collage.courseType=this.dataInfo.courseType
            this.$refs.collageGrades.goChoseBuy()
          } else {
            this.dataInfo.collage.courseType=this.dataInfo.courseType
            this.$refs.collageGrades.showBuy()
            // this.isShowBuy = true; //选择阶梯
          }
        }
      }
    },
    changeType: function (type, changeDir) {
      //this.typeBar = typeBar;
      if (this.typeBar != type) {
        this.moveDirection = changeDir;
        this.typeBar = type;
        this.handleScroll();
        // window.scrollTo(0, 310)
      }
      return false;
    },
    clickColumnItem() {
      //跳转到专栏
      this.$routerGo(this, "push", {
        path: "/homePage/column/columnDetail",
        query: { cId: -1, ckFrom: global.ckFrom.column, extId: this.extId, distributionId: this.distributionId }
      });
    },
    //添加观看记录
    watchRecord: function () {
      let data = {
        ckFrom: this.distributionId ? 55 : 5,
        extId: this.extId || -1,
        cId: this.courseId || -1
      };
      utilJs.postMethod(global.apiurl + "common/playRecord", data, function (
        res
      ) { });
    },
    //点赞
    clickLikes: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.collectBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (!this.dataInfo.isLike) {
        let $this = this;
        let postUrl = `${global.apiurl}courses/${this.courseId}/likes`;
        if (this.distributionId) {
          postUrl = `${global.apiurl}distributionMarkets/${this.distributionId}/subs/${this.courseId}/incrLikes`;
        }
        utilJs.postMethod(postUrl, {}, function (res) {
          $this.dataInfo.likes += 1;
          $this.dataInfo.isLike = true;
          $this.$showCjToast({
            text: "点赞成功",
            type: "success"
          });
        }
        );
      } else {
        this.$showCjToast({
          text: "您已点赞",
          type: 'text'
        });
      }
    },
    clickCommentBtn() {
      this.addComment();
      if (this.articleType == 2 || this.articleType == 3)
        return;
      this.$nextTick(() => {
        var commentOffsetTop =
          document.getElementById("commentWrap")
            ? document.getElementById("commentWrap").offsetTop
            : 0;
        var coverHeigh = document.querySelector("#coverWrap")
          ? document.querySelector("#coverWrap").offsetHeight
          : 0;
        window.scrollTo(0, commentOffsetTop - 640 * 1.9 / 16)
      })
    },
    clickBuyNow(isShowPresent, selectNum = 0) {
      this.isShowPresent = isShowPresent || false;
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      if (!utilJs.isOpenIosGzhPay(this.ckFrom)) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      let ckFrom = this.ckFrom == this.cfrom.collageCourse ? this.cfrom.course : (this.ckFrom == this.cfrom.collageColumn ? this.cfrom.column : this.ckFrom);
      let extId = this.ckFrom == this.cfrom.collageCourse ? -1 : (this.ckFrom == this.cfrom.collageColumn ? this.extId : this.extId);
      let cId = this.courseId;
      let pId = this.ckFrom == this.cfrom.flashSalesCourse ? this.dataInfo.sales.pId : null;
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
        let pathQuery = {
          cId: cId,
          extId: extId,
          ckFrom: ckFrom,
          isFromInvite: 0,
          isGoPay: this.dataInfo.isRelForm ? false : true,
          recRelateId: this.recRelateId,
          recType: this.recType,
          courseType: this.dataInfo.courseType,
        };
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if (this.ckFrom == this.cfrom.flashSalesCourse && ((this.optimal && this.optimal.optimalPriceType == 101) || this.isShowPresent == true)) {
          pathQuery.pId = pId;
        } else if (this.optimal && this.optimal.optimalPriceType != 101) {
            pathQuery.ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : 5;
        }
        utilJs.goBindMobile(pathQuery);
        return;
      }
      //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址 限时购pid隐藏
      ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? this.cfrom.course : ckFrom);
      extId = this.isShowPresent == true ? -1 : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? -1 : extId);
      // 有关联表单，则跳到报名表单处
      // 关联表单id是cId
      if ((this.dataInfo.collectPage==1 || (this.dataInfo.collectPage==2 && selectNum > 0))&&this.dataInfo.collectPage != 3 &&this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
        this.goForm(this.isShowPresent, '', selectNum);
      } else {
        let pathQuery = {
          cId: cId, extId: extId,
          ckFrom: ckFrom,
          isFromInvite: 0,
          courseType: this.dataInfo.courseType,
          recRelateId: this.recRelateId,
          recType: this.recType
        };
        if (this.ckFrom == this.cfrom.flashSalesCourse && ((this.optimal && this.optimal.optimalPriceType == 101)|| this.isShowPresent == true)) {
          pathQuery.pId = pId;
        } else if (this.optimal && this.optimal.optimalPriceType != 101) {
          pathQuery.ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : 5;
        }
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if (selectNum > 0) {  //企业团购
          pathQuery.isGroupPurchase = true;
          pathQuery.groupSelectNum = selectNum;
          pathQuery.groupPurchaseId = this.dataInfo.enterpriseGroup.id;
        }
        // 处理专栏信息下单买课程得标记
        if (this.fromColumnId > -1) {
          pathQuery.rePlaceDetailUrl = 1
        }
        this.$routerGo(this, "push", {
          path: "/homePage/course/coursePay",
          query: pathQuery
        });
      }
    },
    //跳转到表单
    goForm: function (isShowPresent, bargainId, selectNum = 0) {
      this.isShowPresent = isShowPresent || false;
      let ckFrom = this.ckFrom == this.cfrom.collageCourse ? this.cfrom.course : (this.ckFrom == this.cfrom.collageColumn ? this.cfrom.column : this.ckFrom);
      let extId = this.ckFrom == this.cfrom.collageCourse ? -1 : (this.ckFrom == this.cfrom.collageColumn ? this.extId : this.extId);
      let cId = this.courseId;
      let pId = this.ckFrom == this.cfrom.flashSalesCourse ? this.dataInfo.sales.pId : null;
      //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址 限时购pid隐藏
      ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? this.cfrom.course : ckFrom);
      extId = this.isShowPresent == true ? -1 : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? -1 : extId);
      // 有关联表单，则跳到报名表单处
      // 关联表单id是cId
      let isGoBack = this.dataInfo.hasPermission == true||this.dataInfo.payType==3|| (this.isMarketing && !this.dataInfo.sales && selectNum == 0)|| this.dataInfo.isSaleOnly == 0 ? 1 : 0;
      let pathQuery = {
        cId: cId,
        extId: extId,
        ckFrom: ckFrom,
        isFromInvite: 0,
        pId: pId,
        relType: 1,
        type: 1,
        recRelateId: this.recRelateId,
        recType: this.recType,
        isGoBack: isGoBack,
        bargainId: bargainId,
        courseType: this.dataInfo.courseType
      };
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      if (selectNum > 0) {  //企业团购
        pathQuery.isGroupPurchase = true;
        pathQuery.groupSelectNum = selectNum;
        pathQuery.groupPurchaseId = this.dataInfo.enterpriseGroup.id;
      }
      this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
    },
    //邀请好友
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.course;//this.ckFrom;
      let extId = 2;//this.ckFrom == global.ckFrom.course ? 2 : this.extId;
      let cId = this.courseId;
      let queryT = { cId: cId, extId: extId, ckFrom: ckFrom, courseType: 2 }
      if (this.dataInfo.isSaleOut == 0) {
        queryT.isNoSale = true;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: queryT
      });
    },
    goTOturn() {
      let $this = this
      $this.$routerGo($this, "push", {
        path: "/homePage/marketing/turntable",
        query: {
          taId: $this.dataInfo.joinActivityInfo.activityData.id
        }
      });
    },
    updateLearnTime() {
      let intervalTime = 0;
      if (watchCount < 6) {
        intervalTime = 1000 * 5;
      } else {
        intervalTime = 1000 * 60;
      }
      watchTimeControl = setTimeout(() => {
        if(watchCount < 6) {
          watchCount ++
          this.setProgress(5)
          this.shareGetIntegration(62, 5);
        } else {
          this.setProgress(60)
          this.shareGetIntegration(62, 60);
        }
        startSt = new Date().getTime();
        this.updateLearnTime();
      }, intervalTime);
    },
    // 获取课程详情
    getImgTextDetail() {
      let $this = this;
      let postUrl = `${global.apiurl}courses/${this.courseId}?extId=${this.extId}&ckFrom=${this.ckFrom}`;
      if (this.accessToken) {
        postUrl = postUrl + '&accessToken=' + this.accessToken;
      }
      if (this.fromColumnId > -1) {
        postUrl = postUrl + '&columnId=' + this.fromColumnId;
      }
      if (this.distributionId) {
        postUrl = `${global.apiurl}distributionMarkets/${this.distributionId}/subs/${this.courseId}`;
      }
      if (this.themeId) {
        postUrl = postUrl + `&themeId=${this.themeId}`
      }
      if(this.circleQuery) {
        postUrl = `${postUrl}&circleId=${this.circleQuery.circleId}&planId=${this.circleQuery.planId}`;
      }
      postUrl = postUrl.includes('?') ? (postUrl + '&isSkeleton=1') : (postUrl + '?isSkeleton=1');
      postUrl = this.cfg && this.cfg.enableColumnOrderType == 2 ? (postUrl + '&sortInColumn=desc') : (postUrl + '&sortInColumn=asc');
      utilJs.getMethod(postUrl, (res)=>{
        if (res == null || res == '' || res.status == -1 || (res.status != 0 && res.status != 1 && res.status != 2 && res.status != 3 && res.hasPermission == false) || (res.status != 0 && res.status != 1 && res.status != 2 && res.status != 3 && res.payType == 1 && (!$this.accessToken)) || res.courseType != 2 || (res.isSaleOnly == 0 && res.isSaleTogether == 0)) {
          let info = res.status == -1 ? '删除' : '下架';
          info = '该课程已' + info + '，请联系管理员！';
          if (res.courseType != 2) {
            info = '此课程不属于图文课程，请通过课程名称进行搜索课程！';
          }
          if (res.isSaleOnly == 0 && res.isSaleTogether == 0) {
            info = '此课程无法购买，请联系商家！';
          }
          $this.$routerGo($this, "replace", { path: "/error/emptyPage", query: { from: '', info: info } });
        } else {
          setDocumentTitle(res.name.length > 13 ? (res.name.substring(0, 13) + '...') : res.name);
          $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
          if(!$this.distributionId) {
            res.preview = null;
          }
          if (((!res.hasPermission) || (res.hasPermission && (res.payType != 2 || (res.vipType > 1 && ((res.vipDiscount == 0 && (res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) || (res.svipDiscount == 0 && (res.permissionType == 3 || res.permissionType == 19))))))) && (res.status == 2 || res.status == 0)) {
            $this.isOffSale = true;
            $this.$store.commit("updateHasNoticeText", true);
          }
          //判断课程指定日期过期是否已经过期
          if (res.isValid == 2 && (res.permissionType == 0 || res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) {
            $this.hasExpired = utilJs.getTimeByDate(res.validAt) - (new Date()).getTime() < 0;
            if ($this.hasExpired) {
              $this.$store.commit("updateHasNoticeText", true);
            }
          }
          if (!$this.distributionId && res.recommend.isExist == 0) {
            $this.recRelateId = '';
          }
          //定时上架
          if (res.status == 3 && ((!res.hasPermission) || (res.hasPermission && (res.payType != 2 || (res.vipType > 1 && ((res.vipDiscount == 0 && (res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) || (res.svipDiscount == 0 && (res.permissionType == 3 || res.permissionType == 19)))))))) {
            $this.timingPutOn = true;
            $this.$store.commit("updateHasNoticeText", true);
          }
          res.deductiblePoints = res.deductibleAmount; // 兼容字段
          $this.dataInfo = res;
          // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
          $this.optimal = res.optimal || null;
          if (!$this.isOffSale && !$this.hasExpired && !$this.timingPutOn) {
            $this.articleType = res.articleType;
            $this.swiperImgList = res.articleImgs;
          }
          // if ($this.articleType == 3 && $this.articleImgs && $this.articleImgs.length > 0) {
          //   for (let i = 0; i < $this.articleImgs.length; i++) {
          //     $this.swiperImgList.push($this.articleImgs[i].imgUrl)
          //   }
          // }
          if ($this.dataInfo.hasPermission && $this.dataInfo.permissionType == 42) {
            $this.dataInfo.giftRelates = null;
          }
          if (($this.articleType == 2 || $this.articleType == 3) && $this.dataInfo.hasPermission) {
            $this.$nextTick(() => {
              // if ($this.dataInfo.circleList && $this.dataInfo.circleList.length > 0) {
              //   $this.articleTabList.push({
              //     title: '圈子',
              //     index: 7,
              //     sortIndex: 4
              //   })
              // }
              if ($this.dataInfo.combos && $this.dataInfo.combos.length > 0) {
                $this.articleTabList.push({
                  title: '系列课',
                  index: 4,
                  sortIndex: 4
                })
              }
              if ($this.dataInfo.giftRelates && $this.dataInfo.giftRelates.length > 0) {
                $this.articleTabList.push({
                  title: '赠品',
                  index: 2,
                  sortIndex: 6
                })
              }
              if ($this.dataInfo.relateDatumArr && $this.dataInfo.relateDatumArr.length > 0) {
                $this.articleTabList.push({
                  title: '课件',
                  index: 5,
                  sortIndex: 2
                })
              }
              if (($this.dataInfo.enableComment == 1 && !$this.distributionId) || ($this.dataInfo.enableComment == 2 && $this.cfg && $this.cfg.enableComment == 1 && !$this.distributionId && $this.cfg.enableArticleComment == 1)) {
                $this.articleTabList.push({
                  title: '评论',
                  index: 3,
                  sortIndex: 7
                })
              }
            })
          }
          if ($this.dataInfo.hasPermission && !$this.bindPhoneSetting.getBind) {
            $this.updateLearnTime();
          }
          if ($this.dataInfo.isCopy > -1) { //-1：使用全局变量 1：允许复制 0：禁止复制
            $this.cfg.isCopy = $this.dataInfo.isCopy;
          }
          if ($this.dataInfo.isCopyPicture > -1) { //-1：使用全局变量 1：允许复制 0：禁止复制
            $this.cfg.isCopyPicture = $this.dataInfo.isCopyPicture;
          }
          $this.isCollect = $this.dataInfo.isCollect ? $this.dataInfo.isCollect : false;
          if ($this.dataInfo.hasPermission && $this.dataInfo.detailPath && $this.dataInfo.detailPath.length > 5) {
            utilJs.getPageHtml($this.dataInfo.detailPath, sres => {
              $this.dataInfo.detail = sres;
            });
          }
          if (!$this.dataInfo.hasPermission && $this.dataInfo.previewPath && $this.dataInfo.previewPath.length > 5) {
            utilJs.getPageHtml($this.dataInfo.previewPath, sres => {
              $this.dataInfo.preview = sres;
            });
          }
          // 是否显示评论tab
          if (($this.dataInfo.enableComment == 1 && !$this.distributionId) || ($this.dataInfo.enableComment == 2 && $this.cfg && $this.cfg.enableComment == 1 && !$this.distributionId && $this.cfg.enableArticleComment == 1)) {
            $this.tabList.push({
              title: '评论',
              index: 2,
              smallNum: 0
            })
          }
          $this.tabList.push({
            title: '推荐',
            index: 4,
          })
          if ($this.dataInfo.joinActivityInfo && $this.dataInfo.joinActivityInfo.isShowDialog == 1) {
            $this.$cjConfirm({
              title: '', //
              titleCenter: true, //标题是否居中
              message: '恭喜！您获得了大转盘抽奖机会！',
              messageCenter: true, //内容是否居中
              showMasker: true, //是否显示透明背景
              clickCloseModal: false, //是否点击透明背景关闭弹窗
              showCancelButton: true, //是否显示取消按钮
              cancelButtonText: '稍后再说', //取消按钮文本
              confirmButtonText: '立刻前往', //确认按钮文本
              onConfirm() {
                $this.$routerGo($this, "push", {
                  path: "/homePage/marketing/turntable",
                  query: {
                    taId: $this.dataInfo.joinActivityInfo.activityData.id
                  }
                });
              }
            })
          }
          $this.extColumnId = res.extColumnId;
          if ($this.extColumnId) {
            if (res.columnLessons && JSON.stringify(res.columnLessons.next) != '[]') {
              $this.nextLessons = res.columnLessons.next;
            }
            if (res.columnLessons && JSON.stringify(res.columnLessons.prev) != '[]') {
              $this.prevLessons = res.columnLessons.prev;
            }
            if (res.columnLessons && res.columnLessons.cur && JSON.stringify(res.columnLessons.cur) == '[]') {
              $this.fromColumnId = -1;
            }
          }
          if ($this.fromColumnId != -1 && !localStorage.getItem('showFirstScrollTag')) {
            $this.showFirstScroll = true;
            localStorage.setItem('showFirstScrollTag', true);
          }
          $this.extId = res.columnId == 0 ? -1 : res.columnId;
          $this.showFormText = res.collectPage != 3 && res.permissionType != 42 &&res.hasPermission == true && res.isRelForm == true && res.hasFormLog == false && localStorage.getItem("showForm") == 1 ? true : false;
          // 拼团
          if (res.collage != null && $this.companyAuth.enableCollage == 1) {
            let nt = (new Date()).getTime();
            let st = utilJs.getTimeByDate(res.collage.startTime);
            let et = utilJs.getTimeByDate(res.collage.endTime);
            if (nt >= st && nt < et && res.collage.status < 3) {
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.collageCourse : global.ckFrom.collageColumn;
              res.collage.status = 2;
            } else if (nt < st && res.collage.status == 1) {
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.collageCourse : global.ckFrom.collageColumn;
              res.collage.status = 1;
            } else if (nt >= et && res.collage.status == 2) {
              res.collage.status = 3;
              res.collage = null;
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
            } else {
              $this.dataInfo.collage = null;
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
            }
          } else if (res.sales != null && (res.sales.limit == 0 || res.sales.balance > 0) && res.sales.status && $this.companyAuth.enableFlashSalesModule == 1) { // 限时购
            let nt = (new Date()).getTime();
            let st = utilJs.getTimeByDate(res.sales.sales.startTime);
            let et = utilJs.getTimeByDate(res.sales.sales.endTime);
            if (nt >= st && nt < et && res.sales.sales.status > -1) {
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.flashSalesCourse : global.ckFrom.flashSalesColumn;
              res.sales.sales.status = 2;
            } else if (nt < st && res.sales.sales.status == 1) {
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column; //未开始支付还是走原价支付流程
              res.sales.sales.tatus = 1;
              // $this.dataInfo.sales = null;
            } else if (nt >= et && res.sales.sales.status == 2) {
              res.sales.sales.status = -1;
              res.sales = null;
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
            } else {
              $this.dataInfo.sales = null;
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
            }
          } else if (res.isFriendHelper) { //友情灌溉
            $this.ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
          } else {
            $this.dataInfo.collage = null;
            $this.dataInfo.sales = null;
            $this.ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
          }
          // 关联配套打卡
          $this.relatedList = res.signColumns;
          // if (res.signColumns && res.signColumns.length > 0 && res.hasPermission) {
          //   $this.tabList.splice(2, 0, {
          //   title: '搭配学习',
          //   index: 3,
          // })}
          var rewardPoints = sessionStorage.getItem($this.courseId + 'rewardPoints');
          if (rewardPoints > 0) {
            $this.showPoints = true;
            $this.rewardPoints = rewardPoints;
          }
          if (res.hasPermission == true) {
            startSt = new Date().getTime();
          }
          let giftPops = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
          if ($this.dataInfo.hasPermission && $this.dataInfo.giftRelates && $this.dataInfo.giftRelates.length > 0 && !giftPops.includes($this.courseId)) {
            $this.dataInfo.giftRelates.forEach((item) => {
              if (item.prodType == global.ckFrom.shopping && item.status != 1) {
                // this.goodsToGet = true;
                $this.$cjConfirm({
                title: '', //
                titleCenter: true, //标题是否居中
                message: '赠品礼包中包含商城商品，是否前往兑换',
                messageCenter: true, //内容是否居中
                showMasker: true, //是否显示透明背景
                clickCloseModal: false, //是否点击透明背景关闭弹窗
                showCancelButton: true, //是否显示取消按钮
                cancelButtonText: '取消', //取消按钮文本
                confirmButtonText: '去兑换', //确认按钮文本
                onConfirm() {
                  let giftPopArrTmp = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
                  giftPopArrTmp.push($this.courseId)
                  localStorage.setItem('giftPopArr', JSON.stringify(giftPopArrTmp));
                  $this.popGiftModal();
                },
                onCancel() {
                  let giftPopArrTmp = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
                  giftPopArrTmp.push($this.courseId)
                  localStorage.setItem('giftPopArr', JSON.stringify(giftPopArrTmp));
                }
              })
              }
            })
          }
          $this.getCommentStatus();
          $this.getRelatedList();
          let that = $this;
          //分销商城没有关联
          if (!$this.distributionId && $this.ckFrom != global.ckFrom.column) {
            utilJs.postMethod(
              global.apiurl + "common/relevance",
              { objId: $this.courseId, ckFrom: $this.ckFrom == $this.cfrom.flashSalesCourse ? 5 : $this.ckFrom },
              function (relevanceRes) {
                that.relationData = relevanceRes;
                if (that.dataInfo.hasPermission && (that.articleType == 2 || that.articleType == 3) && that.relationData && 
                  (that.relationData.circle.length > 0 || that.relationData.courses.length > 0 || that.relationData.goods.length > 0
                  || that.relationData.socials.length > 0 || that.relationData.exams.length > 0 || that.relationData.datums.length > 0
                  || that.relationData.ebooks.length > 0 || that.relationData.columns.length > 0 || that.relationData.mutuals.length > 0
                  || that.relationData.normalPapers.length > 0 || that.relationData.shortPapers.length > 0 || that.relationData.signColumns.length > 0
                  || that.relationData.speechs.length > 0)
                ) {
                  that.articleTabList.push({
                    title: '推荐',
                    index: 1,
                    sortIndex: 5
                  })
                }
              }
            );
          }
          //重置底部菜单的字段
          $this.dataInfo.showFriendHelper = !$this.dataInfo.hasPermission && !$this.distributionId && $this.companyAuth.enableFriendHelper == 1 && $this.dataInfo.isFriendHelper && $this.ckFrom == $this.cfrom.course && $this.dataInfo.collage == null; //是否友情灌溉购买
          $this.dataInfo.showBuyButton = !$this.dataInfo.hasPermission; //是否显示购买按钮（true则要替换为立即体验，代表没权限进入）
          $this.dataInfo.showPresentFriend = $this.cfg.enableSales == 1 && !$this.isiOS && !$this.distributionId && $this.dataInfo.payType == 2 && $this.dataInfo.isSaleOnly == 1 && $this.dataInfo.isUserGroup != 1; //是否显示赠送好友
          $this.dataInfo.showMarketingCard = $this.dataInfo.isFriendHelper || $this.dataInfo.collage || $this.dataInfo.sales || $this.dataInfo.bargain; //是否显示活动海报
          $this.dataInfo.showInvitionCard = !$this.distributionId && $this.dataInfo.isInvitionCard == 1 && !$this.dataInfo.isFriendHelper && $this.dataInfo.collage == null && $this.dataInfo.sales == null && $this.dataInfo.bargain == null && ($this.dataInfo.recommend.isExist == 0); //是否显示邀请好友

          // if ($this.dataInfo.isSaleOnly == 0) { //非单卖则获取相关联的知识套餐和专栏
            $this.getBelong(1);
          // }
          if (!res.hasPermission) {
            $this.getCouponList();
          }
          if ($this.dataInfo.enterpriseGroup && $this.dataInfo.payType == 2) {
            let gpInfo = {
              cover: $this.dataInfo.enterpriseGroup.image ? $this.dataInfo.enterpriseGroup.image : $this.dataInfo.courseAvatar,
              title: $this.dataInfo.enterpriseGroup.name ? $this.dataInfo.enterpriseGroup.name : $this.dataInfo.name,
              coursePrice: $this.dataInfo.price,
              ladders: $this.dataInfo.enterpriseGroup.ladder,
              isValid: $this.dataInfo.isValid,
              validTime: $this.dataInfo.validTime,
              validAt: $this.dataInfo.validAt,
              defultBuyNum: $this.dataInfo.enterpriseGroup.ladder[0].minBuyNumber,
              hasGift: $this.dataInfo.giftRelates && $this.dataInfo.giftRelates.length > 0 ? true : false
            }
            $this.$nextTick(() => {
              $this.$refs.gpModal.initData(gpInfo);
            })
          }
          $this.watchRecord();
          $this.wechatShare();
          $this.$nextTick(function () {
            if (!$this.dataInfo.hasPermission && !$this.distributionId) {
              $this.getProdRelateCollocation();
            }      
            if ($this.dataInfo.hasPermission && $this.$refs.descriptions && !$this.isUserGroup && !$this.distributionId && !this.isStoreUserGroup) {
              $this.$refs.descriptions.getDescptionDetail();
            } else if ((!$this.dataInfo.hasPermission || $this.isUserGroup || this.isStoreUserGroup) && !$this.distributionId) {
              $this.$refs.previewDescriptions.imgTextPreview();
            }
            window.addEventListener('scroll', $this.handleScroll);
          });
        }
        if (res.sales && res.sales.sales) {
          $this.isSalesBegin = (res.sales.sales.startTime).replace(/\s+|[-]|[:]/g, "") <= (utilJs.getNowTime()).replace(/\s+|[-]|[:]/g, "") ? true : false;
        }

        $this.columnPermission = res.columnPermission || false;
        $this.ltAnswerId = res.ltAnswerId;
        $this.ltAnswerStatus = res.ltAnswerStatus;
        $this.isAnswererSelf = res.isAnswererSelf;
        $this.$nextTick(() => {
          // 训练营需要一进入就提交进度
          if (!!$this.ttId) {
            $this.setProgress(1);
          }
        })
        const guideData = $this.dataInfo.guideData || null;
        const { hasPermission } = $this.dataInfo;
        const showPosition = guideData && (guideData.showPosition == 3 || (guideData.showPosition == 1 && (!hasPermission || ($this.dataInfo.payType == 1 && $this.dataInfo.isSaleOnly != 0))) || (guideData.showPosition == 2 && hasPermission))
        if($this.$refs.guidance && guideData && guideData.isOpenGuide == 1 && guideData.guideType.includes(3) && showPosition){
          utilJs.getLeadSocialLog($this.cfrom.course, $this.courseId).then(dataRes => {
            if (!dataRes || dataRes == '') {
              $this.$refs.guidance.isShowPop();
              utilJs.saveLeadSocialLog($this.cfrom.course, $this.courseId)
            }
          })
        }
      }
      );
    },
    clickClassItem(e) {
      let columnDetail = e.item;
      let sIndex = e.sIndex;
      let index = e.index;
      if (columnDetail.prodType == 110) {
        this.$routerGo(this, "push", {
          path: "/homePage/course/video",
          query: {
            courseId: columnDetail.courseId,
            extId: this.extColumnId,
            ckFrom: this.ckFrom,
            goIndex: sIndex,
            courseIndex: index,
            distributionId: this.distribution ? this.extId : '',
          }
        });
        return
      } else if (columnDetail.prodType == 111) {
        this.$routerGo(this, "push", {
          path: "/homePage/course/voice",
          query: {
            courseId: columnDetail.courseId,
            extId: this.extColumnId,
            ckFrom: this.ckFrom,
            goIndex: sIndex,
            courseIndex: index,
            distributionId: this.distribution ? this.extId : '',
          }
        });
        return
      }
    },
    //跳转到所属专栏
    goColumn() {
      this.$routerGo(this, "push", {
        path: "/homePage/column/columnDetail",
        query: { cId: -1, ckFrom: global.ckFrom.column, extId: this.fromColumnId, distribution: this.distributionId, fromBackColumn: true }
      });
    },
    goColumnCourse(lessons, index) {
      let courseId = lessons.courseId || '';
      let courseType = lessons.courseType || '';
      let liveId = lessons.liveId || '';
      let datumId = lessons.datumId || '';
      if (!lessons) {
        return;
      }
      let t = Number(courseType);
      let query = {
        courseId: courseId,
        extId: this.extColumnId,
        ckFrom: global.ckFrom.course,
        distributionId: this.distributionId
      }
      if (index != null) query.courseIndex = index
      switch (t) {
        case 0:
          this.$routerGo(this, "push", {
            path: "/homePage/course/video",
            query: query
          });
          break;
        case 1:
          this.$routerGo(this, "push", {
            path: "/homePage/course/voice",
            query: query
          });
          break;
        case 2:
          this.$routerGo(this, "push", {
            path: "/homePage/course/imgText",
            query: query
          });
          break;
        case 8: 
          this.$routerGo(this, "push", {
            path: "/homePage/datum/datumDetail",
            query: { datumId: datumId, fromColumnId: this.fromColumnId }
          });
          break;
        case 51:
          this.$routerGo(this, "push", {
            path: "/homePage/live/liveDetail",
            query: {
              liveId: liveId
            }
          });
          break;
        case 180:
          this.$routerGo(this, "push", {
            path: "/homePage/live/livePersonalDetail",
            query: {
              liveId: liveId
            }
          });
          break;
      }
    },
    getCommentStatus() {
      this.commentStatus = 0;
      if (this.dataInfo.enableComment == 1 || (this.dataInfo.enableComment == 2 && this.cfg && this.cfg.enableComment == 1 && this.cfg.enableArticleComment == 1)) {
        this.commentStatus = 1;
        this.$nextTick(() => {
          this.$refs.commentCom && this.$refs.commentCom.public_initData()
        })
      }
    },
    //分享
    wechatShare: function () {
      let title = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareTitle ? this.dataInfo.shareSetting.shareTitle : this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.shareSetting && this.dataInfo.shareSetting.sharePic ? this.dataInfo.shareSetting.sharePic : this.dataInfo.courseAvatar;
      if ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) && this.dataInfo.collage != null && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      if (this.dataInfo.sales) {
        title = `【限时抢购】${title}`;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (!this.distributionId && this.companyAuth.enableFriendHelper == 1 && this.dataInfo.isFriendHelper && this.ckFrom == this.cfrom.course && this.dataInfo.collage == null) {
        title = `【快来帮我灌溉吧】${title}`;
      }
      let shareUrl= '';
      if (this.fromColumnId > -1) {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?courseId=${this.courseId}&ckFrom=9&extId=${this.fromColumnId}&refereeId=${localStorage.getItem("userId")}&goIndex=${this.currentIndex}&courseIndex=${this.columnCourseIndex}`;
      } else {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?courseId=${this.courseId}&ckFrom=${this.ckFrom}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}&goIndex=${this.currentIndex}`;
      }
      if (this.distributionId) {
        shareUrl = `${shareUrl}&distributionId=${this.distributionId}`;
      }
      let shareDesc = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareDesc ? this.dataInfo.shareSetting.shareDesc : (this.dataInfo.shareDesc || window.localStorage.getItem("shareDesc") || "点击查看详情");
      let $this = this;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () {
        if (!$this.distributionId) {
          let pointFrom = $this.companyAuth.pointModel == 1 ? 14 : 56;
          $this.shareGetIntegration(pointFrom, -1);
        };
      })
    },
    //手机端分享
    appShare: function () {
      let title = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareTitle ? this.dataInfo.shareSetting.shareTitle : this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.shareSetting && this.dataInfo.shareSetting.sharePic ? this.dataInfo.shareSetting.sharePic : this.dataInfo.courseAvatar;
      if ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) && this.dataInfo.collage != null && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      if (this.dataInfo.sales) {
        title = `【限时抢购】${title}`;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (!this.distributionId && this.companyAuth.enableFriendHelper == 1 && this.dataInfo.isFriendHelper && this.ckFrom == this.cfrom.course && this.dataInfo.collage == null) {
        title = `【快来帮我灌溉吧】${title}`;
      }
      let shareUrl= '';
      if (this.fromColumnId > -1) {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?courseId=${this.courseId}&ckFrom=9&extId=${this.fromColumnId}&refereeId=${localStorage.getItem("userId")}&goIndex=${this.currentIndex}&courseIndex=${this.columnCourseIndex}`;
      } else {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?courseId=${this.courseId}&ckFrom=${this.ckFrom}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}&goIndex=${this.currentIndex}`;
      }
      if (this.distributionId) {
        shareUrl = `${shareUrl}&distributionId=${this.distributionId}`;
      }
      let shareDesc = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareDesc ? this.dataInfo.shareSetting.shareDesc : (this.dataInfo.shareDesc || window.localStorage.getItem("shareDesc") || "点击查看详情");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },

    //分享回调领取积分(只能领取一次)
    shareGetIntegration: function (pointFrom, duration) {
      if ((pointFrom == 14 && this.companyAuth.enableShareArticlePoint != 1 && this.companyAuth.pointModel == 1) || (pointFrom == 56 && this.companyAuth.enableShareCourse != 1 && this.companyAuth.pointModel == 2)) {
        return;
      }
      if (pointFrom == 62 && this.companyAuth.enableReadArticle != 1) {
        return;
      }
      let $this = this;
      //积分来源 1. 分享视频，2：观看视频，3：分享音频，4：观看音频，14：分享文章
      let data = {
        cId: this.courseId,
        extId: -1,
        pointFrom: pointFrom,
        duration: duration
      };
      utilJs.postMethod(global.apiurl + "common/getPoints", data, function (
        res
      ) {
        let integrateCount = res.points;
        if (integrateCount > 0 && pointFrom != 62) {
          $this.integrateCount = integrateCount;
          $this.showIntegrate = true;
        }
      });
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + this.courseId + '&redeemType=37&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = res.data ? $this.couponList.concat(res.data) : [];
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    //领取优惠券
    getCoupon(couponId, cIndex) {
      if (
        localStorage.getItem("enableBindPhoneInRedeemCode") == 1 &&
        !localStorage.getItem("uMobile")
      ) {
        if (utilJs.goBindMobile()) return;
      } 
      if (gettingCoupon) {
        return;
      }
      gettingCoupon = true;
      let $this = this;
      utilJs.postMethod(
        global.apiurl + "redeemCodes/collectRedeemCode/" + couponId,
        {},
        function (res) {
          gettingCoupon = false;
          if (res.status == 1) {
            $this.couponList[cIndex].hasReceive++;
            $this.$showCjToast({
              text: '领取成功',
              type: 'success',
            }).then(()=>{
              if ($this.couponList[cIndex].type == 1) {
                $this.$router.go(0)
              }
            })
          } else {
            $this.$showCjToast({
              text: res.detail,
              type: 'text'
            });
          }
        }
      );
    },
    goCenterProduct(tItem) {
      let type = tItem.prodType;
      if (type == 1 || type == 23 && tItem.vipInfo) {
        if (tItem.vipInfo.isCollage == 1) {
          this.$routerGo(this, "push", {
            path: "/homePage/collage/vipCollage",
            query: {
              prodId: tItem.vipInfo.id,
              isCollage: true
            }
          });
        } else {
          this.$routerGo(this, "push", {
            path: "/member/vip/vipDetail",
            query: {
              type: tItem.prodType,
              fromCmpId: tItem.vipInfo.id
            }
          })
        }
        // else if (tItem.vipInfo.isMarketing == 1) {
        //   this.$routerGo(this, "push", {
        //     path: "/member/vip/vipBuy",
        //     query: {
        //       prodId: tItem.vipInfo.id,
        //       pId: tItem.vipInfo.marketID,
        //       type: type == 1 ? this.cfrom.flashSalesVip : this.cfrom.flashSalesSvip
        //     }
        //   })
        // } else {
        //   this.$routerGo(this, "push", {
        //     path: "/member/vip/vipBuy",
        //     query: {
        //       prodId: tItem.vipInfo.id,
        //       type: type == 1 ? this.cfrom.vip : this.cfrom.svip
        //     }
        //   })
        // }
        return;
      }
      let query = {}
      let prodId = type == 78 ? tItem.subId : tItem.id;
      if (type == 76) {
        query.relType = tItem.type;
        query.type = 2;
      }
      goDetails(this, type, prodId, query, tItem.courseType);
    },
    //作为分享页被推荐人进入
    isRecommendPage() {
      let recRelateId = this.recRelateId; //推荐人ID
      let recType = this.recType; //推荐类型 1 访问 2 绑定 3 支付
      let bindPhone = this.$route.query.bindPhone; //完成推荐绑定手机号
      let data = { relateId: recRelateId };
      if (recRelateId) {
        if (recType == 1) {
          this.$nextTick(() => {
            this.$refs.recommendPresent.completetRecommendTask(data); // 调用子组件方法
          })
        } else if (recType == 2) {
          if (bindPhone) {
            data.mobile = localStorage.getItem("uMobile");
            this.$nextTick(() => {
              this.$refs.recommendPresent.completetRecommendTask(data); // 调用子组件方法
            })
          } else if (!localStorage.getItem("uMobile")) {
            utilJs.goBindMobile({
                recRelateId: recRelateId,
                recType: recType,
                goImgText: 1,
                courseId: this.courseId,
                extId: this.extId,
                ckFrom: this.ckFrom
            });
          } else {
            this.$cjConfirm({
              title: '领取失败',
              message: '您已绑定过手机号，不在推荐范围，无法领取奖励',
              showCancelButton: false,
            })
          }
        }
      }
    },
    //记录课时学完的学员（仅调用一次）
    lessonMemberLog() {
      let data = {
        prodId: this.courseId,
        prodType: 112,
        cId: this.courseId,
        nickname: localStorage.getItem('userName') ? localStorage.getItem('userName') : ''
      }
      let postUrl = `${global.apiurl}analysis/course/lesson/memberLog`;
      utilJs.postMethod(postUrl, data, res => {
      });
    },
    // 训练营进度
    setProgressRatio() {
      let data = {
        ttId: this.ttId, //营期ID
        tpId: this.tpId, //环节ID
        tlId: this.tlId, //课时ID
        ratio: 100, //完成进度0-100
        duration: playedDuration > 0 ? playedDuration : 0,
      };
      if (this.ttId && this.tpId && this.tlId) {
        utilJs.postMethod(
          global.apiurl + "k12/trainings/progress",
          data,
          function (res) { }
        );
      }
    },
    //记录播放进度
    setProgress: function (duration) {
      let data = {
        prodId: this.courseId,
        prodType: 112,
        cId: this.courseId,
        progress: 1,
        duration: duration > 0 ? duration : 0,
        cType: this.distributionId ? 103 : 5
      }
      let postUrl = `${global.apiurl}analysis/course/progressLog`;
      utilJs.postMethod(postUrl, data, res => {
        this.judgeCompliance()
        /** curLessonRatio 当前课程的学习进度，只有没有学习进度的时候才会重新在请求 下个学习任务 是否解锁，图文课程进度只有0或100
         * 防止每次记录观看进度都会触发这个方法
         * 任务已经100%，isNextUnlock还没解锁，说明不是当前图文进度改变就能解锁的，无须多次请求
         */
        if (this.campButtonStatus && this.campButtonStatus.curLessonRatio == 0) {
          this.goNextCampLesson()
        }
      });
      if (Number(this.dataInfo.progressRatio) != 1 && !this.hasFirstLog) {
        this.hasFirstLog = true;
        this.lessonMemberLog();
      }
    },
    handleClickCertificate(){
      this.$refs.learnCerCom.drawNow('', this.courseId, global.ckFrom.imgText)
    },
    judgeCompliance(){
      let postUrl = `${global.apiurl}Certificate/judgeCompliance?prodType=${global.ckFrom.imgText}&prodId=${this.courseId}`;
      // enableStudyCard	number	
      // 是否有设置学习证书1=是；0=否	
      // isReceivedStudy	number	
      // 是否已经领取了证书：1=是；0=否	
      // isComplianceStudy	number	
      // 是否达到学习证书发放条件：1=是；0否	
      // studyHonorImage	string
      // 学习证书图片（如果领取了会有图片）	
      // enableBuyCard	number
      // 是否有设置入学证书1=是；0=否	
      // isReceivedBuy	number	
      // 是否已经领取了入学证书：1=是；0=否	
      // isComplianceBuy	number
      // 是否达到入学证书发放条件：1=是；0否	
      // buyHonorImage	string	
      // 入学证书证书图片（如果领取了会有图片）
      utilJs.getMethod(postUrl, res => {
        if (res.studyHonorImage || (res.enableStudyCard == 1 && res.isComplianceStudy == 1)) {
          this.showStudyCard = true
          this.isReceivedStudy = res.isReceivedStudy
          // this.$resf.learnCer.drawNow('', this.courseId, global.ckFrom.imgText,res.isReceivedStudy)
        }
        if(res.enableBuyCard==1&&res.isComplianceBuy==1&&res.isReceivedBuy==0){
          this.isReceivedBuy=res.isReceivedBuy
          let enrolCerLoca =global.ckFrom.imgText+'-'+this.courseId
          if(JSON.parse(localStorage.getItem("enrolCer"))==enrolCerLoca){
              return
          }else{
            this.$refs.enrolcerCom.drawNow('', this.courseId, global.ckFrom.imgText)
          }
        }
      });
    },
    // 提问
    goAskQuestion(answerId) {
      this.$routerGo(this, "push", {
        path: "/homePage/qa/questionDetail",
        query: {
          answerId: answerId,
          courseId: this.courseId,
          src: 4,
        }
      })
    },
    colseModal(){
      this.showGpModal = false;
    },
    groupPurchasePay(selectNum) {
      this.clickBuyNow(false, selectNum);
    },
    //点右上角x记录观看时长
    cacheWatchTimeByClose() {
      if (this.dataInfo.hasPermission) {
        endSt = new Date().getTime();
        playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
        let data = {
          prodId: this.courseId,
          prodType: 112,
          cId: this.courseId,
          progress: 1,
          duration: playedDuration > 0 ? playedDuration : 0,
          cType: this.distributionId ? 103 : 5,
          isClose: 1,
          encodeCompanyId: localStorage.getItem("companyId") ? localStorage.getItem("companyId") : '',
          encodeUserId: localStorage.getItem("userId") ? localStorage.getItem("userId") : ''
        }
        let postUrl = `${global.apiurl}analysis/course/progressLog`;
        utilJs.berforeCloseSendData(postUrl, data);
        if (Number(this.dataInfo.progressRatio) != 1 && !this.hasFirstLog) {
          this.hasFirstLog = true;
          let data2 = {
            prodId: this.courseId,
            prodType: 112,
            cId: this.courseId,
            nickname: localStorage.getItem('userName') ? localStorage.getItem('userName') : '',
            encodeCompanyId: localStorage.getItem("companyId") ? localStorage.getItem("companyId") : '',
            encodeUserId: localStorage.getItem("userId") ? localStorage.getItem("userId") : ''
          }
          let postUrl2 = `${global.apiurl}analysis/course/lesson/memberLog`;
          utilJs.berforeCloseSendData(postUrl2, data2);
        }
        startSt = 0;
        endSt = 0;
        playedDuration = 0;
      }
    },
    initData() {
      this.isiOS = navigator.userAgent.indexOf("IOSLogin") > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1;
      this.showReport = false;
      this.tabhBarFixed = false;
      this.tabList = [{
        title: '详情',
        index: 0,
      }];
      this.cfg = JSON.parse(localStorage.getItem("cfg"))
      this.campButtonStatus = {};
      this.ttId = this.$route.query.ttId || '';
      this.tpId = this.$route.query.tpId || '';
      this.tlId = this.$route.query.tlId || '';
      this.themeId = this.$route.query.themeId || '';
      this.circleQuery = {
        circleId: this.$route.query.circleId || '',
        planId:this.$route.query.circlePlanId || ''
      };
      this.typeBar = 0;
      this.isShowPresent = false;
      this.isShowShare = false;
      this.showIntegrate = false;
      this.page = 1;
      this.is_page = false;
      this.couponPage = 1;
      this.couponIsPage = false;
      this.couponLoading = false;
      this.onePage = 1;
      this.is_onePage = false;
      this.goodsRoomId = this.$route.query.goodsRoomId || '';
      this.courseId = this.$route.query.courseId;
      this.extId = this.$route.query.extId || -1;
      this.ckFrom = this.$route.query.ckFrom || global.ckFrom.course;
      this.accessToken = this.$route.query.accessToken;
      this.distributionId = this.$route.query.distributionId || '';
      this.recRelateId = this.$route.query.recRelateId || '';
      this.recType = this.$route.query.recType || 0;
      this.fromColumnId = this.$route.query.extId ? this.$route.query.extId : -1;
      this.dataInfo = '';
      this.relationData = "";
      this.pathFrom = '';
      this.hasShowMore = false;
      this.showAllContent = false;
      this.showShareMoneyTip = true;
      this.showCoupon = false;
      this.couponList = [];
      this.searchWord = "";
      this.showColumnList = false;
      this.showSearchColumn = false;
      this.columnCourseList = [];
      this.columnCoursePage = 1;
      this.columnIsPage = false;
      this.extColumnId = 0;
      this.nextLessons = null;
      this.prevLessons = null;
      this.isLoading = false;
      gettingCoupon = false;
      this.cloroRGB = THEME_RGB_MAP[this.theme];
      this.faStatus = 1;
      this.discountList = [];
      this.equityList = [];
      this.familyCardData = [];
      this.integral = 0;
      this.checkText = '';
      this.ltAnswerId = 0;
      this.isAnswererSelf = '';
      this.ltAnswerStatus = 0;
      this.relatedList = [];
      startSt = 0;
      endSt = 0;
      this.showFormText = false;
      this.showCombo = false;
      this.belongLoading = false;
      this.belongPackageList = [];
      this.belongColumnList = [];
      this.training = [];
      this.pagePackage = 1;
      this.pageColumn = 2;
      this.pageTraining = 2;
      this.descriptList = [];
      this.commentStatus = 0;
      this.showMarketingBuyBtn = false;
      this.hasExpired = false;
      this.popRelateCourse = false;
      this.relateShowType = 0;
      lastScroll = 0;
      this.bottomBuyDirection = 1;
      this.timingPutOn = false;
      this.isOffSale = false;
      this.showFirstScroll = false;
      this.moveDirection = 0;
      this.showGpModal = false;
      this.popGift = false;
      this.popRelatesDatum = false;
      this.popType = 1;
      this.relateCollocation = [];
      this.hasFirstLog = false;
      watchCount = 0;
      this.isInitData = false;
      this.columnPermission = false;
      this.showPackageList = false;
      this.showLecturerModal = false;
      this.chainInfo = '';
      this.isChainProd = false;
      this.articleType = 1;
      this.articleImgs = [];
      this.showAuthorModal = false;
      this.swiperIndex = 0;
      this.articleTabList = [{
        title: '详情',
        index: 0,
      }],
      this.articleTypeBar = 0;
      this.showSmallTabbar = false;
      this.showImgCount = true;
      this.popAllRelate = false;
      this.optimal = null;
      this.popCircleModal = false;
      this.interactionExamList = [];
      this.interactionClockInList = [];
      this.popInteractionType = 1;
      this.moreDeviceType = 1;
      clickChange = false;
      showCountTimmer = setTimeout(() => {
        this.showImgCount = false;
      }, 5000);
      this.$store.commit("updateHasNoticeText", false);
      getBindPhoneSetting(this.distributionId ? 1003 : 112).then(res => {
        this.bindPhoneSetting = res;
      });
      utilJs.getChainInfo(this.cfrom.course, this.courseId).then(res => {
        this.chainInfo = res;
        this.isChainProd = this.chainInfo && this.chainInfo.isChainProd;
      });
      this.isRecommendPage();
      this.getImgTextDetail();
      this.judgeCompliance()
      // this.getDescptionDetail();
      this.campDirectoryInitData()
    },
  },
  activated() {
    setDocumentTitle("图文详情");
    this.initData();
    this.buyedInfoSwiper()
    window.removeEventListener("unload", this.cacheWatchTimeByClose, false);
    window.addEventListener("unload", this.cacheWatchTimeByClose, false);
  },
  deactivated() {
    this.$store.commit("updateHasNoticeText", false);
    clearTimeout(previewTimmer);
    clearTimeout(watchTimeControl);
    this.$refs.gpModal.selectShopNum = 0;
    this.is_page_package = false;
    this.is_page_column = false;
    if (this.dataInfo && this.dataInfo.hasPermission && startSt > 0 && !this.bindPhoneSetting.getBind) {
      // this.$refs.abstractContent.style.height = "auto";
      endSt = new Date().getTime();
      playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
      this.setProgress(playedDuration);
      this.shareGetIntegration(62, Number(playedDuration));
      startSt = 0;
      endSt = 0;
      playedDuration = 0;
    }
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener("unload", this.cacheWatchTimeByClose, false);
    sessionStorage.removeItem(this.courseId + 'rewardPoints');
  },
  destroyed() {
    //window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn-wrap > div:first-child {
  color: #ff8831;
  color: var(--mb7color);
  background-color: rgba(255, 99, 45, 0.1);
  background-color: var(--rgba10color);
  border-bottom-left-radius: 0.9rem;
  border-top-left-radius: 0.9rem;
  border: 1px solid #ff8831;
  border: 1px solid var(--mb7color);
}
.btn-wrap > div:nth-child(2) {
  color: white;
  background-color: rgba(255, 99, 45, 0.5);
  background-color: var(--rgba50color);
  border-top: 1px solid #ff8831;
  border-top: 1px solid var(--mb7color);
  border-bottom: 1px solid #ff8831;
  border-bottom: 1px solid var(--mb7color);
}
.btn-wrap > div:last-child {
  color: white;
  background-color: #ff8831;
  background-color: var(--mb7color);
  border-bottom-right-radius: 0.9rem;
  border-top-right-radius: 0.9rem;
  border: none;
  border-top: none;
  border-bottom: none;
}
.theme-market .btn-wrap > div:first-child {
  background-color: var(--rgba10MarketColor);
  border: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:nth-child(2) {
  background-color: var(--rgba50MarketColor);
  border-top: 1px solid var(--marketColor1);
  border-bottom: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:last-child {
  background-image: -webkit-linear-gradient(0, var(--marketColor2) 0%, var(--marketColor1) 100%);
  color: #FFFFFF;
}
.qrbg {
  width: 100%;
  height: 6rem;
  margin-top: 0.4rem;
  /* background: url("../../../assets/i/wap/course/ad.jpg") no-repeat center 0; */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.qrbg > img {
  float: right;
  margin-top: 0.2rem;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.7rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 900;
}
.bg-tag {
  background: rgba(0, 0, 0, 0.5);
}
.content-mask {
  margin-top: -2.2rem;
}
.coupon-left {
  background: url("../../../../public/i/wap/coupon/coupon_left.png") no-repeat
    100%;
  background-size: 100% 100%;
}
.exchange-left {
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
.all-coupon-bg {
  background-color: #f4f7f9;
}
.coupon-mb1 {
  background: url("../../../../public/i/wap/vip/coupon-mb1.png");
  background-size: cover;
}
.bg-center-product {
  background: url("../../../../public/i/wap/course/center-product.png")
    no-repeat left top;
  background-size: 100% 100%;
}
.camp-guide {
  background: url("../../../assets/i/wap/course/group_guidance_bg.png") no-repeat;
  background-size: 100% 100%;
}
.cart-icon{
  background:rgba(255,255,255,0.92);
}
.bg-lecturer {
  background-color: #F8F9FB;
}
.lt-br-br4 {
  border-radius: 0.1rem 0px 0.1rem 0px;
}
.hot-gradient-bg {
  background: linear-gradient(90deg,#ff3612, #ffbb4e);
}
.hot-price-fc {
  color: #FE9901;
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.filter-blur {
  filter: blur(3px);
}
.backdropFilter {
  filter: blur(3px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -ms-backdrop-filter: blur(4px);
  -moz-backdrop-filter: blur(4px);
}
.backdropFilter-more {
  filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -ms-backdrop-filter: blur(20px);
  -moz-backdrop-filter: blur(20px);
}
.small-bottom-line:after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
}
.moveRight {
  animation: move-right 0.15s linear;
  -webkit-animation: move-right 0.15s linear;
}
@-webkit-keyframes move-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes move-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.moveLeft {
  animation: move-left 0.15s linear;
  -webkit-animation: move-left 0.15s linear;
}
@-webkit-keyframes move-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes move-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bg-ccc {
  background-color: #ccc!important;
}
.fc-3F73F8 {
  color: #3F73F8;
}
.badge-bg {
  width: 100%;
  height: 2.9rem;
  background: url('../../../assets/i/wap/camp/badge-bg.png') no-repeat center center;
  background-size: contain;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.7rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 900;
}
.tab-bar-ios {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 9999;
}
.swiper-page-tag {
  width: 1.35rem;
  background:rgba(0,0,0,0.4);
  border-radius: 0.5rem;
  height: 0.7rem;
  color: #fff;
}
</style>
<style>
.imagesType .w24px {
  width: 24px;
  border-radius: 4px;
  opacity: 1;
}
.imagesType .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.3);
  opacity: 1;
}
.imagesType .swiper-wrapper {
  align-items:center;
  -webkit-align-items:center;
  max-height: 21.333rem;
}
.my-swiper-h {
  height: 21.333rem;
  overflow: hidden;
}
.interaction-p1-bg {
  color: #FD8758;
  background: #FFF5F1;
  border-radius: 0.25rem;
}
.interaction-p2-bg {
  color: #FC6450;
  background: #FFF5F4;
  border-radius: 0.25rem;
}
.interaction-p3-bg {
  color: #2979FF;
  background: #EEF7FF;
  border-radius: 0.25rem;
}
.interaction-p4-bg {
  color: #6973E0;
  background: #F3F4FF;
  border-radius: 0.25rem;
}
.c-p-b-8 {
  bottom: -0.2rem
}
</style>
